什么是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'])
