gulp plug and usage instructions

Gulp.js is an automated build tool, you can use it to automate common tasks in the project, such as: compression optimization JS, compressed CSS, compressing images and so on. Compared with Grunt, Gulp writing task taskseasier and easier to read and maintain, and simple plug-in high quality. Gulp.js based on Node.js to build, use Node.js of Stream flow , so that the project can be built quickly and reducing IO operations.

1. Install Gulp

gulpThe task processing mechanism, the source files as input, through Node.js of Streamoperation flow and 流guide gulpthe task of processing plug-in pluginsprocessing is complete, the results will output to the specified output directory.

From the gulptask processing mechanism can be seen, gulpthe equivalent of a task manager, and the actual business processing is done by plug-ins. Therefore, gulpthe installation also includes: installation gulpand installation gulptasks plug-ins in two parts.

1.1 Installation Gulp

Installation gulp, you can choose to install or installed in a global project devunder development environment.

Global Installation gulp:

npm install gulp -g

In the project's devinstallation development environment:

npm install gulp --save-dev

After the development environment installed, the project package.jsonfile is devDependenciessaved under the node. Recommendations for gulpthe use of global installation, so you can use in all projects. Node.js project to install non-global is particularly applicable.

1.2 Installation Gulp plug

gulpInstall plug-ins, you can also use the global installed or installed in the devdevelopment environment, recommend the use of a global comparison site installation. gulpPlug-ins can be installed on demand, if you only need to deal with CSS, then install only the CSS-related processing plug-ins. gulpAll plug-ins, please refer to: of the Gulp plug . For CSS File, JS file processing, image processing, you may need the following plug-ins:

ruby-sass-GULP : Sass file-based compilation of ruby and sass, Sass files can be CSS file
autoprefixer-GULP : Autoprefixer, you can parse CSS file, and add browser prefixes to rule in CSS
Minify-CSS-GULP : CSS file compression tool
jshint-GULP : JSHint, a JS code inspection tool, the JavaScript can detect errors and potential problems
uglify-GULP : uglify, JS code optimization tool that can be used to compress and landscaping (or "vilify") JavaScript Code
the concat-GULP : File splicing tool can be used to merge multiple CSS files or multiple JS files
imagemin-GULP : imagemin, picture compression tool

Generally plug described above meet the general front-end processing resources, such as: Compile less and sass files, merge CSS file compression, merged JS file compression, image compression. In their daily work, you may also need some processing tasks like cleaning up a directory before performing gulp, monitor server resources, such as the change only for processing resources, following some plug-ins may be used:

Clean-gulp : target directory cleanup before gulp empty target directory for task execution
Cache-GULP : resource caching can be used to cache the compressed resources, such as: Pictures
the Notify-GULP : task notification tool that can be used to notify the console output to complete a task execution
livereload-GULP : server resource monitoring, resource server when the changes to refresh the page. Need to tie a browser plug or such treatment in a page , use more complex, we do not recommend the use of non-if necessary

In devinstalling these plug-ins under development environment:

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

2. Use Gulp

2.1 `gulp`Some common API

To understand gulp, we recommend checking out their official documents . For general use gulp, understand the following several API, you can meet the daily needs:

gulp.task(): The method used to define a task, the internal Orchestrator
gulp.src(): gulpIt is based on the task flow transfer Node.js and processing, gulp.src()for introducing the stream, namely: to read file operations. It may be the following categories:
- /public/js/index.js: A specified file
- /public/js/*.js: All files in a directory
- /public/**/*.jsAll js files in the directory and all subdirectories:
- !/public/js/main.js: A directory, all files except main.js of js
- *.+(js|css);Regular expression matching the root directory of the file extension is all the js and css
gulp.dest(): Output file in the specified path. It can only specify the path, but not rename the output file, rename can use the plug gulp-rename
gulp.watch(): Monitor changes in a file (such as: CSS, JS, pictures), when the file changes, we can use it to perform the appropriate task

2.2 `gulp`Example of use

This example with a Node.js project demonstration project uses expressWeb framework, in expressthe static resources item is placed publicunder the directory. In the global installation gulpand after-related plug-ins, create a gulpfile.jsfile (in this case, the file in the project root directory). gulpfile.jsDocument reads as follows:

var gulp = require('gulp'),  
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    = imagemin require ( 'gulp imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

// style processing tasks
gulp.task('styles', function() {  
  return gulp.src ( 'public / html / css / *. css') // all incorporated CSS
    .pipe (concat ( 'main.css')) // merge CSS file
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe (gulp.dest ( 'public / dist / css')) // output Complete
    .pipe (rename ({suffix: '.min'})) // Rename
    .pipe (minifycss ()) // CSS compression
    .pipe (gulp.dest ( 'public / dist / css')) // output Compact
    .pipe (notify ({message: 'Style file processed'}));
});

// If you need to file compiled by scss css, on the use of this code
// gulp.task('styles', function() {  
//   return gulp.src('public/html/css/main.scss')
//     .pipe(sass({ style: 'expanded', }))
//     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//     .pipe(gulp.dest('public/dist/styles'))
//     .pipe(rename({ suffix: '.min' }))
//     .pipe(minifycss())
//     .pipe(gulp.dest('public/dist/styles'))
//     .pipe(notify({ message: 'Styles task complete' }));
// });

// JS processing tasks
gulp.task('scripts', function() {  
  return gulp.src ( 'public / html / js / *. js') // all JS to be treated is introduced
    .pipe (jshint.reporter ( 'default')) // S code checking
    .pipe (concat ( 'main.js')) // merged JS file
    .pipe (gulp.dest ( 'public / dist / js')) // output Complete
    .pipe (rename ({suffix: '.min'})) // Rename
    .pipe (uglify ()) // JS compression
    .pipe (gulp.dest ( 'public / dist / js')) // output Compact
    .pipe (notify ({message: 'JS file processing is completed'}));
});

// Image processing tasks
gulp.task('images', function() {  
  return gulp.src ( 'public / html / img / *') // all JS to be treated is introduced
    .pipe (imagemin ({optimizationLevel: 3, progressive: true, interlaced: true})) // Image Compression
    // If you want to change the file had to compress, then use the following code for a
    // .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 
    (ital (gulp.dest 'public / dist / img'))
    .pipe (notify ({message: 'Picture Complete'}));
});

// target directory cleanup
gulp.task('clean', function() {  
  return gulp.src(['public/dist/css', 'public/js', 'public/img'], {read: false})
    .pipe(clean());
});

// default task execution after cleanup,
gulp.task('default', ['clean'], function() {  
    gulp.start('styles', 'scripts', 'images');
});

// Pro listen document
gulp.task('watch', function() {

// // Listen all documents .scss
//   gulp.watch('src/styles/**/*.scss', ['styles']);

    // Listen all css documents
    gulp.watch('public/html/css/*.css', ['styles']);

    // Listen all .js files
    gulp.watch('public/html/js/*.js', ['scripts']);

    // Listen all image files
    gulp.watch('public/html/img/*', ['images']);

// // create real-time adjustment of the server - not used in the project commented
// = liver was server load ();
// // Listen all documents under the dist / directory, there is force the browser to refresh (requires browser plug-in with the previously introduced or increased by JS monitor code page) when updating
//   gulp.watch(['public/dist/**']).on('change', function(file) {
//     server.changed(file.path);
//   });

});

Executed gulpbefore the command, publicthe directory structure is like this:

|____public
| |____html
| | |____css
| | | | ____ some CSS files ......
| | |____ js
| | | | ____ some of the CJS file ......
| | |____ img
| | | | ____ some pictures ......
| | | ____ some HTML pages ......

Under the project root directory, execute the command:

gulp

Execute gulpthe command, publicthe directory structure is like this:

|____public
| |____dist
| | |____css
| | | | ____ main.css
| | | |____ main.min.css
| | |____ js
| | | |____ main.js
| | | |____ main.min.js
| | |____ img
| | | | ____ compressed picture
| | | ____ some HTML pages ......
| |____html
| | |____css
| | | | ____ some CSS files ......
| | |____ js
| | | | ____ some of the CJS file ......
| | |____ img
| | | | ____ some pictures ......
| | | ____ some HTML pages ......

gulpSuccessful operation, the file is output to a publi/distdirectory, CSS and JS files are compressed version and the full version two, the picture has also been compressed. If other processing is required, you can modify their own gulpfile.jsfile code.