Gulp complete JavaScript compression merge, CSS compression

Recently need to optimize the project, mainly on the compression of JS and CSS file compression, find relevant information found gulp can achieve the relevant functions, hereby share the use of experience.

1. Installing Gulp

Gulp is a front-end build tool based on node. js. So first you need to install Nodejs, install Nodejs.

After you complete the NODEJS installation, you need to use NPM to install Gulp.

Install the Global Gulp first

NPM Install-G Gulp

Then install the local gulp in the project root directory.

At this point the project root directory will be more than the following folder Node_modules

OK, now Gulp has been installed, but Gulp itself does not provide JS compression merge functions, need to use Gulp related plug-ins. Currently only need to complete the JS compression merge and CSS file compression function, first install the appropriate plug-in:

1.CSS Compression Gulp-minify-css

2.js Compression gulp-uglify

3.js Merging Gulp-concat

Because of the need to code the JS code before compression, after the compression is completed with a suffix of min, we also need to install two additional plugins:

4. Renaming Gulp-rename

5.js Code Detection Gulp-jshint (or gulp-jslint)

(More plugins can view http://gulpjs.com/plugins/)

Execute the following command under the project root directory:

NPM Install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint--save-dev

The installed plugin will appear in the Node_modules folder mentioned above.

2. Using Gulp

OK, now you can use Gulp to create the Gulpfile.js file in the project root directory.

Add the following code in the Gulpfile.js

varGulp = require (' Gulp ')), Minifycss= Require (' Gulp-minify-css '), Concat= Require (' Gulp-concat '), Uglify= Require (' gulp-uglify '), rename= Require (' Gulp-rename '), Jshint=require (' Gulp-jshint '); //Grammar CheckGulp.task (' Jshint ',function () {        returnGULP.SRC (' Js/*.js '). Pipe (Jshint ()). Pipe (Jshint.reporter (' Default '));    }); //Compress CSSGulp.task (' Minifycss ',function() {        returnGULP.SRC (' Css/*.css ')//files that need to be manipulated. Pipe (rename ({suffix: '. Min '}))//Rename the file name after compression. Pipe (Minifycss ())//Perform compression. Pipe (Gulp.dest (' Css '));//output Folder    }); //compress, Merge JSGulp.task (' Minifyjs ',function() {        returnGULP.SRC (' Js/*.js ')//files that need to be manipulated. Pipe (Concat (' main.js '))//Merge all js to Main.js. Pipe (Gulp.dest (' JS '))//Output to Folder. Pipe (rename ({suffix: '. Min '}))//Rename the file name after compression. Pipe (Uglify ())//Compression. Pipe (Gulp.dest (' Js '));//Output    }); //default command, after entering gulp in cmd, this task is performed (compression JS needs to be checked after JS operation)Gulp.task (' Default ', [' Jshint '],function() {Gulp.start (' Minifycss ', ' minifyjs '); });

The related methods in the above code can view the Gulp API docs

Execute the Gulp command in the root directory of the file:

(If there is a problem with the JS file, the corresponding error message will appear, follow the prompts to modify the wrong information)

Bingo, now you can see in the CSS folder in the compressed CSS file, in JS can see the merged compression of the good main.min.js. To complete the task, simply modify the path of the CSS,JS reference in the HTML to a new path.

The above is the experience of using Gulp, Gulp is a fast growing build tool, he also has a lot of other useful tools (such as watch function, can monitor the changes in real-time files, automatic completion of related operations). Can continue to focus on, research gulp, more application gulp to the front-end development.

Gulp complete JavaScript compression merge, CSS compression