##Gulp实现前端构建 1、清空目录 - gulp-clean - del 2、文件复制 - gulp-copy - 原生效果达到（gulp.src,gulp.dest） 3、JS压缩 - gulp-uglify 4、CSS压缩 - gulp-minify-css - gulp-uncss(去除多余的css) 5、文件合并 - gulp-concat 6、启动浏览器 - gulp-open - browser-sync 7、监视 - gulp-watch - 原生效果达到（gulp.watch） 8、其他 - yargs 区分不同环境，参数获取方式 - gulp-notify 桌面通知 - gulp-util 日志等通用方法 - run-sequence 控制程序异步还是同步(参数组间都是同步，数组中的为异步) ##安装 ``` $ npm install xxx --save-dev ``` ##代码 gulpfile.js ```js (function() { var browserSync, del, gulp, minifyCss, runSequence, uglify; gulp = require('gulp'); runSequence = require('run-sequence'); //删除目录 del = require('del'); //JS压缩 uglify = require('gulp-uglify'); //css压缩 minifyCss = require('gulp-minify-css'); //启动浏览器 browserSync = require('browser-sync').create(); gulp.task('default', function(callback) { return runSequence(['clean'], ['build'], ['serve', 'watch'], callback); }); //删除目录任务 gulp.task('clean', function(callback) { return del(['./dist/'], callback); }); //构建任务，同一数组中异步执行 gulp.task('build', function(callback) { return runSequence(['copy', 'miniJs', 'miniCss'], callback); }); //拷贝任务 gulp.task('copy', function() { return gulp.src('./src/**/*.*').pipe(gulp.dest('./dist/')); }); //压缩js任务 gulp.task('miniJs', function() { return gulp.src('./src/**/*.js').pipe(uglify()).pipe(gulp.dest('./dist/')); }); //压缩css任务 gulp.task('miniCss', function() { return gulp.src('./src/**/*.css').pipe(minifyCss()).pipe(gulp.dest('./dist/')); }); //文件合并任务 gulp.task('concat', function() { return gulp.src('./src/*.js').pipe(concat('all.js', { newLine: ';\n' })).pipe(gulp.dest('./dist/')); }); //启动浏览器任务 gulp.task('serve', function() { return browserSync.init({ server: { baseDir: './dist/' }, port: 7411 }); }); //监控任务，当目录下文件有变化，执行reload任务 gulp.task('watch', function() { return gulp.watch('./src/**/*.*', ['reload']); }); //加载任务，重启浏览器任务 gulp.task('reload', function(callback) { return runSequence(['build'], ['reload-browser'], callback); }); //浏览器加重启任务 gulp.task('reload-browser', function() { return browserSync.reload(); }); }).call(this); ```