11.3 Resumen Ejecutivo de las Acciones y Resultados Relevantes obtenidos
11.3.1 Unidad de Atención a Población Vulnerable
11.3.1.2 Dirección General de Protección a la Infancia
05 Install Grunt
Now it’s time for us to add our first plug-in – which is actually Grunt itself. With the Terminal window open in the project directory, enter the command to install the package from the manager. Here we are not using the –g flag to install them globally, but instead choosing to save them locally and automatically add them to the devDependencies section in the package. json file.
001
> npm install grunt --save-dev06 Dependency added
Once any npm install command has been run to add a grunt plug-in with the --save-dev flag used, the system knows that this should be added as a
dependency for development. It then adds the plug-in in question to the devDependency configuration section of the package.json file. Open the file in your editor to see the updates.
001
“devDependencies”: {002
“grunt”: “~0.4.1”003
}07 Uglify plug-in
Let’s add another plug-in into the system. Once again, open up your Terminal window within the project directory and install a new plug-in, grunt-contrib-uglify. Make sure to use the --save-dev flag again so that it is added to the package.json file for you. This plug-in can be used to minify files, which is perfect for any JavaScript files we have.
001
> npm install grunt-contrib-uglify --save- dev08 Grunt config initialisation
Before we can add any tasks to our Gruntfile, we first need to define the grunt.initConfig method, which initialises a configuration object for the current project. This sits directly within the wrapper function. Add this code into the Gruntfile to declare the configuration object. Our task definitions and configuration information will go inside of this function.
001
grunt.config.init({002
003
});09 Uglify configuration
We can now add in our individual task
02 Install Grunt CLI
With Node.js installed we have access to the package manager via the command line. Open up a Terminal or CMD window and run the following command to install the Grunt CLI (Command Line Interface). The –g tag will install it globally, adding it to your system path and making it accessible from any directory on the machine.
001
> npm install g grunt-cli03 Prepare your project
To set up Grunt processes within a new or existing project directory, two specific files are required – both of which need to live in the root of the project location. Create a new file in the root called package. json. At the very least this must contain name and version fields. We’ll also add in the devDependencies field for later use.
001
{002
“name”: “my_grunt_project”,003
“version”: “0.0.1”,004
“devDependencies”: {005
006
}007
}04 Create a Gruntfile
The second required file is the Gruntfile, which is used to configure or define tasks and to load any Grunt plug-ins we have requested within this project. Create
01 Prerequisites
Grunt and the installation of any of its plug-ins is managed through the Node.js package manager. As such, your development machine must have Node.js installed. If you have not already done so, make sure you head over to nodejs.org/download and download the installer.
Source files
available
sIUUQXXX filesilo.co.uk/ bks-594Automate development processes with Grunt.js
configuration. Each plug-in has its own config options, which can normally be found on the Github or Grunt plug-in pages. Define the uglify configuration. Set the build option to reference the source directory where our files reside, and the destination directory into which the minified version will be placed.
001
uglify: {002
build: {003
src: ‘src/js/script.js’,004
dest: ‘dest/js/script.min.js’005
}006
}007
10 Automatic banners
When ‘uglifying’ or processing any files, many grunt plug-ins will let you define a banner, which can be any block of text, and add it to the top of the processed file for you. This is particularly great for the marking and
storing of dates or configuration data in the file. Add the banner option as shown in the following code to the uglify configuration.
001
options: {002
banner: ‘/*! <%= grunt.template. today(“yyyy-mm-dd”) %> */\n’003
},004
build: {005
src: ‘src/js/script.js’,006
dest: ‘dest/js/script.min.js’007
}008
11
Enable the plug-in
With the task config defined, it is now time for us to load the task into the system so that Grunt knows what to reference when a task is run. This is achieved easily by adding in a method into the Gruntfile to load the locally installed npm plug-ins. Simply define the
same plug-in name used when you installed it via the command line.
001
grunt.loadNpmTasks(‘grunt-contrib-uglify’);12
Run the task
Let’s run the task. Open up the Terminal window and navigate to within the project directory. To run a task, we need to call Grunt followed by the name of the task to run, which we configured in the Gruntfile. Once complete, the Terminal window will give you a response from the process.
001
> grunt uglify13
Minified JavaScript file
Our uglify task was set to minify (or uglify) a specific JavaScript file in our source directory and place the revised version into a destination directory ready for production. Open up the dest/js/script.js file in a code <Above> s(SVOUSVOTPO/PEFKT*GZPVIBWFOUHPUUIJTJOTUBMMFE IFBEPWFSUPOPEFKTPSHEPXOMPBEUPEPXOMPBE BOEJOTUBMMJU <Above> s*OTUBMMJOHUIFHSVOUDMJQMVHJOJTJODSFEJCMZTJNQMFUIBOLTUPUIFOPEFQBDLBHFNBOBHFS <Above> s5IFQBDLBHFKTPOŢJMFXJMMVQEBUFXJUIJOTUBMMFEQMVHJOTGPSMPDBMVTF UIBOLTUPUIF TBWFEFWŢMBH <Above> s3VOOJOHUIFVHMJGZUBTLGSPNUIFDPNNBOEMJOF ZPVXJMMSFDFJWFTPNFJOGPSNBUJPO BCPVUUIFTVDDFTTGVMCVJME
editor. You should be able to see the minified code and the inclusion of a date stamp at the top, provided by the banner setting.
14
CSS minification
Let’s add a new plugin to our local project. With a Terminal window open, install a new plug-in called grunt-contrib-cssmin and save as a dev dependency to update the package.json file. We want to keep our CSS files as small as possible for production, and this plug-in was written just for the task.