Portal: Original link https://segmentfault.com/a/1190000002698606

Step 1: Install Node

First and foremost, we need to build a node environment. Visit nodejs.org After downloading, run the program directly and get everything ready. npm It will be installed with the installation package and will be used later.

To ensure that Node is installed correctly, we execute a few simple commands.

node -v
npm -v

If these two lines of commands are not returned, the node may not be installed correctly and be reinstalled.

Step 2: Install gulp

First, we need to install it globally:

npm install -g gulp

At runtime, check the command line for error messages. After installation, you can use the following command to check the version number of gulp to ensure that gulp has been installed correctly.

gulp -v

Then we need to go in and install it again in the project's root directory.

npm install gulp --save-dev

Step 3: Create a new gulpfile.js file

We will use the Gulp plug-in to accomplish the following tasks:

1. Compilation of SASS (gulp-sass)
2. Automatic addition of css prefix (gulp-autoprefixer)
3. Compressed CSS (gulp-minify-css)
4. js code validation (gulp-jshint)
5. Merge js files (gulp-concat)
6. Compressing js code (gulp-uglify)
7. Compressed pictures (gulp-imagemin)
8. Gulp-live reload
9. Picture cache, gulp-cache only if the picture is replaced
10. gulp-notify

Installing these plug-ins requires running the following commands:

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 plug-ins can be seen here gulpjs.com/plugins/

Next we will create a gulpfile.js in the root directory, gulp has only four API task, watch, src, and dest

task is an API for creating tasks, and you can type gulp at the command line Test performs the task of test.
watch is an API for monitoring tasks.
The src API sets the path of files to be processed, which can be multiple files in the form of arrays [main.scss, vender.scss] can also be a regular expression /**/*.scss.
dest is an API that sets the path to generate files. A task can have multiple paths to generate files. One can output uncompressed versions and the other can output compressed versions.

3.1 Load Plug-in:

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-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'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

3.2 Establishment of tasks:

3.2.1 Compiling sass, automatically adding css prefix and compression

First, we compile sass, add prefix, save it under the directory we specified. It's not over yet. We also compress the file, add.min suffix to the file, then output the compressed file to the specified directory. Finally, we remind the task to complete:

// Styles task
gulp.task('styles', function() {
    //Compile sass
    return gulp.src('stylesheets/main.scss')
    .pipe(sass())
    //add prefix
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    //Save uncompressed files to the directory we specified
    .pipe(gulp.dest('stylesheets'))
    //Add. min suffix to the file
    .pipe(rename({ suffix: '.min' }))
    //Compressed Style File
    .pipe(minifycss())
    //Output compressed file to specified directory
    .pipe(gulp.dest('assets'))
    //Remind Task Completion
    .pipe(notify({ message: 'Styles task complete' }));
});

3.2.2 js code validation, merge and compression

// Scripts task
gulp.task('scripts', function() {
    //js code validation
    return gulp.src('javascripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    //js code merge
    .pipe(concat('all.js'))
    //Add. min suffix to the file
    .pipe(rename({ suffix: '.min' }))
    //Compression script file
    .pipe(uglify())
    //Output compressed file to specified directory
    .pipe(gulp.dest('assets'))
    //Remind Task Completion
    .pipe(notify({ message: 'Scripts task complete' }));
});

3.2.3 Picture Compression

// Images
gulp.task('images', function() {
  return gulp.src('images/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('images'))
    .pipe(notify({ message: 'Images task complete' }));
});

3.2.4 Event Monitoring

// Watch
gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('stylesheets/*.scss', ['styles']);
  // Watch .js files
  gulp.watch('javascripts/*.js', ['scripts']);
  // Watch image files
  gulp.watch('images/*', ['images']);
  // Create LiveReload server
  livereload.listen();
  // Watch any files in assets/, reload on change
  gulp.watch(['assets/*']).on('change', livereload.changed);
});

Complete code:

/*!
 * gulp
 * $ 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
 */
// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-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'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
// Styles
gulp.task('styles', function() {
    return gulp.src('stylesheets/main.scss')
    .pipe(sass())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('stylesheets'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('assets'))
    .pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
  return gulp.src('javascripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('all.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('assets'))
    .pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
  return gulp.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() {
    gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('stylesheets/*.scss', ['styles']);
  // Watch .js files
  gulp.watch('javascripts/*.js', ['scripts']);
  // Watch image files
  gulp.watch('images/*', ['images']);
  // Create LiveReload server
  livereload.listen();
  // Watch any files in assets/, reload on change
  gulp.watch(['assets/*']).on('change', livereload.changed);
});

Step 4: Operation

You can run separate tasks, such as

gulp default
gulp watch

You can also run the entire task

gulp

summary

1. Install Node
2. Install gulp
3. New gulpfile.js file
4. Function

Finally, I set up my own project file path.

| - / assets /- - - - - directory of compressed styles and scripts
 | Image/--------- Picture Storage Catalogue
 | - / javascripts /- - script storage directory
 | stylesheets/- Style Storage Directory
 | --/plugin/--------- Plug-in Storage Directory
|--gulpfile.js

Reference link: http://markgoodyear.com/2014/01/getting-started-with-gulp/