Gulp Getting Started Tutorial

1th Step: Install node

First of all, the most basic and most important thing is that we need to build the node environment. Access the nodejs.org, run the program directly after the download is complete, and everything is ready. NPM will be installed with the installation package and will be used later.

To make sure that node is properly installed, we execute a few simple commands.

1 node-v2 npm-v

If these two lines of command are not returned, the node may not be installed correctly for reloading.

2nd Step: Install Gulp

First, we want to install the global installation again:

1 npm install-g Gulp

While the runtime is aware that there is no error message on the command line, you can use the following command to view the Gulp version number to ensure that Gulp is installed correctly.

1 gulp-v

Then we're going to go in and install the project's root directory again.

1 npm Install gulp--save-dev

3rd Step: Create a new Gulpfile.js file

We are going to use the Gulp plugin to accomplish our following tasks:

1. Compilation of sass (Gulp-sass)
2. Automatically add CSS prefixes (gulp-autoprefixer)
3. Compress css (GULP-MINIFY-CSS)
4. JS code Check (gulp-jshint)
5. Merging JS files (gulp-concat)
6. Compression JS code (GULP-UGLIFY)
7. Compress picture (gulp-imagemin)
8. Auto Refresh page (gulp-livereload)
9. Picture cache, only images replaced by compression (Gulp-cache)
10. Change Reminder (gulp-notify)

Installing these plugins requires running the following command:

1 npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin Gulp-notify gulp-rename gulp-livereload Gulp-cache--save-dev

More plugins can be seen here gulpjs.com/plugins/

Then we're going to create a gulpfile.js in the root directory, gulp only four APIs: task ,, watch src , anddest

task This API is used to create tasks that can be entered at the command line gulp test to perform test tasks.
watch This API is used to monitor tasks.
src This API sets the path of the file that needs to be processed, can be multiple files [main.scss, vender.scss] in the form of an array, or /**/*.scss it can be a regular expression.
dest This API sets the path to the generated file, a task can have multiple build paths, one can output an uncompressed version, and the other can output a compressed version.

3.1 Loading plugins:

1 //Load Plugins2 varGulp = require (' Gulp ')),3Sass = require (' Gulp-sass ')),4Autoprefixer = require (' gulp-autoprefixer ')),5Minifycss = require (' gulp-minify-css ')),6Jshint = require (' Gulp-jshint ')),7Uglify = require (' gulp-uglify ')),8Imagemin = require (' gulp-imagemin ')),9Rename = require (' Gulp-rename ')),TenConcat = require (' Gulp-concat ')), OneNotify = require (' gulp-notify ')), ACache = require (' Gulp-cache '), -Livereload = require (' gulp-livereload ');

3.2 Setting up tasks: 3.2.1 compiling sass, adding CSS prefixes and compression automatically

First we compile sass, add the prefix, save to our specified directory, not finished, we also want to compress, add a suffix to the file and .min then output the compressed file to the specified directory, the final reminder task is completed:

1 //Styles Tasks2Gulp.task (' Styles ',function() {3     //Compiling sass4     returnGULP.SRC (' Stylesheets/main.scss ')5 . Pipe (Sass ())6     //Add prefix7. Pipe (Autoprefixer (' last 2 version ', ' Safari 5 ', ' IE 8 ', ' IE 9 ', ' Opera 12.1 ', ' iOS 6 ', ' Android 4 '))8     //Save the uncompressed file below the directory we specified9. Pipe (Gulp.dest (' stylesheets '))Ten     //add a. min suffix to a file One. Pipe (rename ({suffix: '. Min ') })) A     //Compress style Files - . Pipe (Minifycss ()) -     //output compressed files to the specified directory the. Pipe (Gulp.dest (' Assets ')) -     //Reminder Task Complete -. Pipe (Notify ({message: ' Styles task complete ' })); -});

3.2.2 JS Code checksum, merging and compression

1 //Scripts Tasks2Gulp.task (' Scripts ',function() {3     //JS Code Check4     returnGULP.SRC (' Javascripts/*.js ')5 . Pipe (Jshint ())6. Pipe (Jshint.reporter (' Default '))7     //JS Code Merge8. Pipe (Concat (' All.js '))9     //add a. min suffix to a fileTen. Pipe (rename ({suffix: '. Min ') })) One     //Compress script files A . Pipe (Uglify ()) -     //output compressed files to the specified directory -. Pipe (Gulp.dest (' Assets ')) the     //Reminder Task Complete -. Pipe (Notify ({message: ' Scripts task complete ' })); -});

3.2.3 Image Compression

1 // Images 2 function () {3   return gulp.src (' images/* ')4     truetrue  } ))) 5     . Pipe (gulp.dest (' images '))6     . Pipe (notify ({message: ' Images task complete ' }); 7 });

3.2.4 Event Monitoring

1 //Watch2Gulp.task (' Watch ',function() {3   //Watch. scss files4Gulp.watch (' stylesheets/*.scss ', [' Styles ']);5   //Watch. js files6Gulp.watch (' javascripts/*.js ', [' Scripts ']);7   //Watch image Files8Gulp.watch (' images/* ', [' images ']);9   //Create livereload ServerTen Livereload.listen (); One   //Watch any files in assets/, reload on change AGulp.watch ([' assets/* ']). On (' Change ', livereload.changed); -});

Full code:

1 /*!2 * Gulp3 * $ npm Install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-no Tify gulp-rename gulp-livereload Gulp-cache--save-dev4  */5 //Load Plugins6 varGulp = require (' Gulp ')),7Sass = require (' Gulp-sass ')),8Autoprefixer = require (' gulp-autoprefixer ')),9Minifycss = require (' gulp-minify-css ')),TenJshint = require (' Gulp-jshint ')), OneUglify = require (' gulp-uglify ')), AImagemin = require (' gulp-imagemin ')), -Rename = require (' Gulp-rename ')), -Concat = require (' Gulp-concat ')), theNotify = require (' gulp-notify ')), -Cache = require (' Gulp-cache '), -Livereload = require (' Gulp-livereload ')); - //Styles +Gulp.task (' Styles ',function() { -     returnGULP.SRC (' Stylesheets/main.scss ') + . Pipe (Sass ()) A. Pipe (Autoprefixer (' last 2 version ', ' Safari 5 ', ' IE 8 ', ' IE 9 ', ' Opera 12.1 ', ' iOS 6 ', ' Android 4 ')) at. Pipe (Gulp.dest (' stylesheets ')) -. Pipe (rename ({suffix: '. Min ') })) - . Pipe (Minifycss ()) -. Pipe (Gulp.dest (' Assets ')) -. Pipe (Notify ({message: ' Styles task complete ' })); - }); in //Scripts -Gulp.task (' Scripts ',function() { to   returnGULP.SRC (' Javascripts/*.js ') + . Pipe (Jshint ()) -. Pipe (Jshint.reporter (' Default ')) the. Pipe (Concat (' All.js ')) *. Pipe (rename ({suffix: '. Min ') })) $ . Pipe (Uglify ())Panax Notoginseng. Pipe (Gulp.dest (' Assets ')) -. Pipe (Notify ({message: ' Scripts task complete ' })); the }); + //Images AGulp.task (' images ',function() { the   returnGULP.SRC (' images/* ') +. Pipe (Cache (Imagemin ({optimizationlevel:3, progressive:true, Interlaced:true }))) -. Pipe (Gulp.dest (' images ')) $. Pipe (Notify ({message: ' Images task complete ' })); $ }); - //Default Task -Gulp.task (' Default ',function() { theGulp.start (' Styles ', ' scripts ', ' images ')); - });Wuyi //Watch theGulp.task (' Watch ',function() { -   //Watch. scss files WuGulp.watch (' stylesheets/*.scss ', [' Styles ']); -   //Watch. js files AboutGulp.watch (' javascripts/*.js ', [' Scripts ']); $   //Watch image Files -Gulp.watch (' images/* ', [' images ']); -   //Create livereload Server - Livereload.listen (); A   //Watch any files in assets/, reload on change +Gulp.watch ([' assets/* ']). On (' Change ', livereload.changed); the});

4th Step: Run

You can run separate tasks, such as

1 default 2 Gulp Watch

You can also run the entire task

1 Gulp

Summarize

1. Install node
2. Installing Gulp
3. New Gulpfile.js File
4. Run

Finally, I set the project file path myself

|--/assets/--------Compressed style and script-stored directory |--/images/--------Picture directory |--/javascripts/---script store directory |-- /stylesheets/---Style store directory |--/plugin/--------Plugin store directory |--gulpfile. js

Original address: 1190000002698606

Gulp Getting Started Tutorial