I have read a lot of Grunt courses on the Internet, and I feel that I have only a little understanding of them. I think it is necessary to write some articles just to deepen my understanding.

1. Install Grunt globally

NPM install -g grunt-cli // The global install command is not installed at all

2. New project Grunt, installation project depends on the environment

If you are using Webstorm, select the project and open the following command line tool. Otherwise, just switch to CD and install it. Please copy the following JSON file into your project. Please don't change the name of the file

I think there’s a reason why I think most of them are half-informed. There’s too much to take in all at once. So, let’s take it step by step, starting with the basics.

To say that the most basic will start from the demand, now set a basic demand, there are several JS files in the project need to merge, compress, now, it is the first to achieve a shortcut to compress and merge JS function. (I'm lazy, lazy people will use shortcut keys) {* Automatic real-time compression people please ignore me *}

3, if you want to compress and merge JS files, you should let the project know which JS files you want to compress and merge, and know where to put the compression and merge

Here create a new gruntfile.js (pay attention to the name, it should be the same, do not consider why), the rest of the comments, simply can not be more detailed

Module. exports = function (grunt) {// All code must be in this // project configuration grunt.initConfig({// config config config config config config PKG: Grunt.file.readJSON ('package.json'), uglify: {// method name, options: {// file description information, as needed to configure banner: '/*! <%= pkg.file %> <%= Grunt.Template. Today ("yyyy-mm-dd") %> */\n'}, build: {// File field SRC: SRC: [' SRC /backbone/js', 'SRC /underscore/js'], // SRC: [' SRC /backbone/js',' SRC /underscore/js'], // SRC: [' SRC / < % = PKG. The file % > js', 'SRC / < % = PKG. The file1% > js'], / / compression combined placed the file directory of dest dest:' dest / < % = PKG. The file % > min. Js'}}}); // Call the module grunt.loadNPMTasks ('grunt-contrib-uglify') that is required by the compression merge function; // The default task is to compress and merge grunt.registerTask('default', ['uglify']); }

OK, JS finished reading, of course, there are a lot of you can understand, this will need to see the API and so on, and then, look at the following need JSON bar

{"name": "demo", "file": "lib", "version": "0.1.0", "description": "grunt start guide @oospace ", "license": "MIT", "devDependencies" : {" grunt ":" ~ 0.4.1 ", "grunt - contrib - jshint" : "~ 0.6.3", "grunt - contrib - uglify" : "~ 0.2.1", "grunt - contrib - requirejs" : "~ 0.4.1", "grunt - contrib - copy" : "~ 0.4.1", "grunt - contrib - clean" : "~ 0.5.0 grunt - strip", "" :" ~ 0.2.1 "}, "dependencies" : {" express ":" 3 x "}}

This one is just a JSON file. If you don’t know the word, translate it.

Note that the dependency on devDependencies here is something that will be installed automatically if you execute NPM install

* *

The above is the compression of JS, the following let’s put a compression of CSS example, but also to learn something else, think a little more, if here is less file how to do?

Module. exports = function (grunt) {grunt. InitConfig ({concat: {// CSS file Merge CSS: {SRC: [' SRC/CSS /*. CSS '], [' SRC/CSS /*. CSS '], [' SRC/CSS /*. CSS '], [' SRC/CSS /*. CSS '], [' SRC/CSS /*. CSS '], [' SRC/CSS /*. {// CSS file compression CSS: {SRC: 'dist/all.css',// Compress the previous all.css dest: 'dist/all.min.css' //}}); grunt.loadNpmTasks('grunt-css'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['concat','cssmin']); }

4. At this point, we can achieve our original purpose, on the command line to switch to the project folder

Grunt <name> // This command will execute the default command you defined

5. As for the shortcut keys to execute commands, please refer to External Tools of WebStorm and Node