什么是gulp

簡單來說gulp就是一個前端的工作流工具。側重于工作流

gulp的實質

gulp就是用js寫了一個腳本文件gulpfile.js，把所有流程都用js來實現

gulp如何使用

gulp的使用簡單來說就是：
裝gulp,裝gulp插件，抄gulp插件文檔上的例子放到gulpfile里面，最后npm run一下就可以用了。（具體過程太麻煩了，上面的流程就是最精簡的了）

舉例說明

以下是我一個項目中的gulpfile.js文件：

var gulp = require('gulp');
var del = require('del');
var postcss = require('gulp-postcss');
const babel = require('gulp-babel');
var minify = require('gulp-minify');
gulp.task('rm', function() {
    // You can use multiple globbing patterns as you would with `gulp.src`
  return del(['dist/**']);
});
gulp.task('css',['rm'], function () {
    var postcss      = require('gulp-postcss');
    var sourcemaps   = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer');
  return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist'));
});
gulp.task('css-watch', function () {
    var postcss      = require('gulp-postcss');
    var sourcemaps   = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer');
    return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist'));
});
gulp.task('js',['rm'], () =>
    gulp.src('src/*.js')
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(minify({noSource:true,  ext:{min:'.js'}}))
        .pipe(gulp.dest('dist'))
);
gulp.task('js-watch', () =>
    gulp.src('src/*.js')
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(minify({noSource:true,  ext:{min:'.js'}}))
        .pipe(gulp.dest('dist'))
);
gulp.task('watch',function(){
    var watcher1 = gulp.watch('src/**/*.js', ['js-watch']);
    watcher1.on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    var watcher2 = gulp.watch('src/**/*.css', ['css-watch']);
    watcher2.on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
})
gulp.task('default',['rm','css','js'])