Front-end automated Grunt tutorial and automated Grunt tutorial

Front-end automated Grunt tutorial and automated Grunt tutorial

After learning about Bootstrap recently, I found that Bootstrap uses LESS. Well, I started to learn LESS and LESS about it. I found that the automatic compilation tool Grunt and the Grunt process found that node is required. js npm tools and syntax ...... Come on, stop it, install node first, and then learn about it. As this diaosi uses the win7 system, the following tutorials are all tested in win7.

1. Preparation: Install node. js: http://www.w3cschool.cc/nodejs/nodejs-install-setup.html

The new version of nodejs comes with npm management tools, which can be viewed by running the npm-version command.

If you have installed node before, you can use the command to update npm to the latest version: npm install npm @ latest

2. install Grunt-CLI: npm install-g grunt-cli with the g identifier to implant the grunt command into the system path, so that you can run the grunt command in any file directory. You can use grunt-version to check whether the installation is successful.
3. grunt test: 3.1 create a project file, create two folders src and dest under the project, and save the files manually written by src, such as menu. js and slide. js. The dest file stores the running result of grunt.

3.2 Create a package. json file under the project file: The file content is as follows:

Save the file and go to the project file. Run npm install to download the grunt tool. The first three warnings are due to the fact that the description attribute and repository object are not added to our json file, as well as the README introduction. You can add it on your own.
......

After completion, we will find that there are multiple node_modules folders under our project file, and what is saved in it is the plug-in we just defined in package. json to be loaded. 3.3 create a Gruntfile. js File

Module. exports = function (grunt) {// configure grunt. initConfig ({pkg: grunt. file. readJSON ('package. json'), // usage of the concat plug-in concat: {bar: {src: ['src/menu. js', 'src/slide. js'], dest: 'dest/main. js '}}, // usage of the uplify plug-in uglify: {options: {banner:'/* <% = pkg. name %> <% = grunt. template. today ("yyyy-mm-dd") %> */\ n'}, build: {src: 'dest/main. js', dest: 'dest/main. min. js '}}); // load the concat and uglify plug-ins for merge and compression grunt respectively. loadNpmTasks ('grunt-contrib-concat'); grunt. loadNpmTasks ('grunt-contrib-uglify '); // register the task grunt. registerTask ('default', ['concat', 'uglify ']);};

3.4 run the grunt command
3.5 The dest directory contains the main. js and main. min. js files. This is a big success.