1783980923 by Unknown

Author:Unknown
Language: rus
Format: epub
Published: 2014-04-21T08:06:38+00:00

Chapter 3

key = $(this).attr("data-id")

_this.employees[key].promote()

_this.render()

@panel.find(".btn-fire").each ->

$(this).click ->

key = $(this).attr("data-id")

_this.employees[key].fire()

_this.render()

window.GLOBALS.Panel = Panel

Ensure that proper indentation is upheld throughout the file.

CoffeeScript's flexibility comes from its strict indentation rules, so the compilation process will likely break if they are not upheld.

You should note that while filling all of these CoffeeScript files, the grunt-contrib-watch daemon has been running in the background, compiling each one on save. Now that all of the files have been populated, open index.html in a web browser and you should see something similar to the following:

As a final note in the index.html file, observe the following lines:

<!-- build:js scripts/compiled.js -->

<script type="text/javascript" src="bower_components/jquery/

jquery.js"></script>

<script type="text/javascript" src="scripts/app/init.js"></

script>

<script type="text/javascript" src="scripts/models/person.

js"></script>

<script type="text/javascript" src="scripts/models/employee.

js"></script>

<script type="text/javascript" src="scripts/models/panel.

js"></script>

<script type="text/javascript" src="scripts/app/main.js"></

script>

<!-- endbuild -->

[ 55 ]

Making an Employee Management System

These lines of code will be particularly important for the custom build Grunt task that will be implemented in the next section. The grunt-usemin plugin will take this list of scripts and build it into a final compiled.js JavaScript file.

Implementing the custom build Grunt task

The following steps will demonstrate how to set up a build task for this particular project in Grunt:

1. Open the Gruntfile.js file. Initially, the grunt-contrib-clean task will be reused. You should then add the following lines of code after the initialization of the config object:

config['clean'] = {

build: {

files: [{

dot: true,

src: [

'dist/*',

'!dist/.git*'

]

}]

}

};

2. As the grunt-usemin task will be used for this configuration, it will be defined in the following block. The grunt-usemin task helps to minify and concatenate a list of JavaScript or CSS files. As our CSS is already being minified and concatenated via the Sass preprocessor, our configuration will only use the tasks required for JavaScript optimization. A preparation task, useminPrepare, will be first defined to specify the source HTML file and will be followed up with the usemin task to define the final destination of the compiled HTML file. Add the following block of code to the Gruntfile: config['useminPrepare'] = {

options: {

dest: 'dist'

},

html: 'src/index.html'

};

config['usemin'] = {

options: {

dirs: ['dist']

},

html: ['dist/{,*/}*.html']

};

[ 56 ]

Chapter 3

3. Next, the grunt-htmlmin-contrib task will be set up. You should add the following code block to your Gruntfile:

config['htmlmin'] = {

dist: {

options: {

collapseBooleanAttributes: true,

removeAttributeQuotes: true,

removeRedundantAttributes: true,

removeEmptyAttributes: true

},

files: [{

expand: true,

cwd: 'src',

src: '{,*/}*.html',

dest: 'dist'

}]

}

};

Again, similar to before, this code block will minify the amount of HTML

that is required.

4. As required by grunt-usemin, the grunt-contrib-uglify task will be defined in this step. You should add the following block to your Gruntfile: config['uglify'] = {

options: {

mangle: false

}

};

5. The grunt-contrib-copy task will need to be defined for the last stage of the build task. You can achieve this by adding the following block to your Gruntfile:

config['copy'] = {

build: {

files: [{

expand: true,

dot: true,

cwd: 'src',

dest: 'dist',

src: []

}]

}

};

[ 57 ]

Making an Employee Management System

6. In order to avoid conflict with the browser cache, the compiled files used for this project will need to have a cache bust prepended to their filenames. This can be done by adding the following block of code to your Gruntfile: config['rev'] = {

dist: {

files: {

src: [

'dist/scripts/{,*/}*.js',

]

}

}

};

7. Finally, it is important to configure your grunt-contrib-cssmin task by inserting the following section of code:

config['cssmin'] = {

dist: {

files: {

'dist/styles/main.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.