Gulp Tutorial Compression Merge Css,js

Package.json
If you are familiar with NPM, you can use Package.json to save all NPM install--save-dev gulp-xxx module dependencies and module versions.
At the command line, enter

NPM Init

will be required to complete the project information in turn, not clear can directly enter skip

Installation dependencies
Install Gulp to project (Prevent Global Gulp upgrade from incompatible with this project Gulpfile.js code)

Nup Install Gulp--save-dev

Description:--save-dev Save configuration information to Package.json devdependencies node.
Now open Package.json will find the following code

"Devdependencies": {    "gulp": "^3.8.11"}

Declares that the development of this project relies on gulp
Then install other dependencies: The project needs to be installed, here we can install uniformly, separated by a space
NPM gulp-minify-css gulp-concat gulp-uglify gulp-rename gulp-util--save-dev
At this point Packjson will continue to update, and we will install dependencies on the unified write Packjson.
Configuring the JS task
Create a new Gulpfile.js file at this time
1. First introduce dependency

var gulp = require (' Gulp '),    minifycss = require (' Gulp-minify-css '),    concat = require (' Gulp-concat '),    Uglify = require (' gulp-uglify '),    rename = require (' Gulp-rename '),    gutil = require (' Gulp-util ');

2. Add an execution task
Compress CSS

Gulp.task (' Minify_css ', function () {    var csssrc = ['./src/css/*.css '];    Return GULP.SRC (CSSSRC)//Compressed Files        . Pipe (concat (' all.css '))//merge all CSS to All.css        . Pipe (Gulp.dest ('./dist/css ')) Output folder        . Pipe (rename ({suffix: '. Min ')). Pipe (        minifycss ())        . Pipe (Gulp.dest ('./dist/css '));//Perform compression});        

Compression JS

Gulp.task (' Minify_js ', function () {    var jssrc = ['./src/js/*.js ', '!. /src/js/*.src.js '];    Return Gulp.src (JSSRC)        . Pipe (concat (' all.js ')//merge all JS to All.js        . Pipe (Gulp.dest ('./dist/js '))// Output all.js to Folder        . Pipe (rename ({suffix: '. Min '))//rename the compressed file name        . Pipe (Uglify ())//Compression        . Pipe (Gulp.dest ( './dist/js ')); Output});

3. Default Tasks
Default task

Gulp.task (' Default ', function () {    gulp.run (' minify_css ', ' Minify_js ');});

Perform tasks
At the command line, enter:

Gulp
The final form of the directory structure is as follows

SRC is our original file, and dist is the file we generated after we've compressed it.

Gulp Tutorial Compression Merge Css,js