Gulp

CSDN1
CSDN2

Gulp4.0以下用法

• 常规用法

const gulp =require('gulp');

 /*  API 
     gulp.src()   找到源文件路径
     gulp.dest()  找到目标文件路径；如果路径不存在，会自动创建;
     gulp.watch() 监听 第一个参数 监听的额文件路径 第二个参数 要执行的任务
     gulp.pipe()  程序运行管道
 */

//整理.html文件
gulp.task('copy-html',function() {
  return gulp.src('*.html').pipe(gulp.dest('dist/'))
  
})
// 静态文件
gulp.task('images',function() {
  //  return gulp.src('img/*.{jpg,png}').pipe(gulp.dest('dist/images'));
  //  return gulp.src('img/*/*').pipe(gulp.dest('dist/images'));//拷贝img文件夹下的文件夹下的所有文件，但不能拷贝同级图片
   return gulp.src('img/**/*').pipe(gulp.dest('dist/images'));//拷贝img 下所有文件夹和图片等
})
//拷贝多个文件到一个目录下
gulp.task('all',function() {
  // return gulp.src(['js/*.js','img/**/*','!img/3.png']).pipe(gulp.dest('dist/data'))
  console.log(111)
})

//一次性执行多个任务
gulp.task('build',['copy-html','images','all'],function(){
  console.log('任务执行完毕！');
})


//监听
gulp.task("default",function(){
   gulp.watch('*.html',['copy-html']);
   gulp.watch('img/**/*',['images']);
   gulp.watch(['*.html','js/*.js'],['all']);
})

// 插件
/*
gulp-scss  
gulp-minify-css 压缩css插件

gulp-concat 合并文件（js）
gulp-uglify 压缩js

gulp-rename  重命名插件
gulp-conect  启动一个服器
*/

• 实际用例

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');

// 压缩html
gulp.task('testHtmlmin', function (done) {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
  gulp.src('*.html').pipe(htmlmin(options)).pipe(gulp.dest('dist/')).pipe(connect.reload());
  done();  
});

//压缩css
const cleanCSS = require('gulp-clean-css');
gulp.task('csscompress', function (done) {
    // 1. 找到文件
      gulp.src('css/*.css')
        // 2. 压缩文件
        .pipe(cleanCSS())
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/css')).pipe(connect.reload());
        done()
});

// 压缩js
const uglify = require('gulp-uglify');
gulp.task('jscompress', function(done) {
    gulp.src('js/service/**').pipe(uglify()).pipe(gulp.dest('dist/js')).pipe(connect.reload());
    done()
});


//静态文件
gulp.task('images',function(done){
     gulp.src('images/service/**/*').pipe(gulp.dest('dist/images')).pipe(connect.reload());
    done()
})


gulp.task('all',['testHtmlmin','csscompress','jscompress','images'],function(done) {
    console.log('移动&&压缩完成！')
    done();
})

const connect = require("gulp-connect");
gulp.task("server", function(done){
    connect.server({
        root: "dist", //设置跟目录
        port: 8888,
        open:true,
        livereload: true //启动实时刷新功能
    })
    done()
})

gulp.task("watch", function(done){
    gulp.watch("*.html", ["testHtmlmin"]);
    gulp.watch("images/service/**/*", ["images"]);
    gulp.watch("css/*.css", ['csscompress']);
    gulp.watch("js/service/*.js", ['jscompress']);
    done()
})

//默认启用
gulp.task("default",['watch','server']);

• 版本号

  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^4.3.0",
    "gulp-connect": "^5.7.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-uglify": "^3.0.2"
  }
```
### browser-sync（热更新插件）
[https://www.cnblogs.com/jiaoshou/p/12012221.html](https://www.cnblogs.com/jiaoshou/p/12012221.html)