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