gulp

gulp

基于node平台开发的前端构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率。

gulp 能做什么

• 项目上线，HTML、CSS、JS文件压缩合并
• 语法转换（es6、less …）
• 公共文件抽离
• 修改文件浏览器自动刷新

gulp 使用

1.使用npm install gulp下载gulp库文件
2.在项目根目录下建立gulpfile.js文件
3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
4.在gulpfile.js文件中编写任务.
5.在命令行工具中执行gulp任务（npm install gulp-cli）

gulp 中提供的方法

• gulp.src()：获取任务要处理的文件
• gulp.dest()：输出文件
• gulp.task()：建立gulp任务
• gulp.watch()：监控文件的变化

const gulp = require('gulp');
  // 使用gulp.task()方法建立任务
 gulp.task('first', () => {
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
 });

gulp 插件

npm install

• gulp-htmlmin ：html文件压缩
  https://www.npmjs.com/package/gulp-htmlmin

• gulp-csso ：压缩css
  https://www.npmjs.com/package/gulp-csso

• gulp-less: less语法转化
  https://www.npmjs.com/package/gulp-less

• gulp-babel ：JavaScript语法转化
  https://www.npmjs.com/package/gulp-babel

• gulp-uglify ：压缩混淆JavaScript

• gulp-file-include 公共文件包含
  https://www.npmjs.com/package/gulp-file-include

• browsersync 浏览器实时同步

gulpfile.js 文件

//引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
var less = require('gulp-less');
var csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', done=> {
  console.log('第一个gulp任务');
  //获取要处理的文件
  gulp.src('./src/css/base.css')
      .pipe(gulp.dest('./dist/css'))
  done();
});
//注意：gulp4.0版本使用task时，回调函数使用匿名函数带来的问题，gulpgulp不再支持同步任务
//最简答的解决方法就是添加回调函数（callback），来指示函数的完成
//这里我不知道为什么写 done，其它名字也可以
//https://www.gulpjs.com.cn/docs/getting-started/async-completion/



gulp.task('htmlmin', done=> {
  gulp.src('./src/*.html')
    //抽取html文件中的公共代码，感觉有点类似vue中的组价
    .pipe(fileinclude())
    //压缩html文件中的代码
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dist'));
  done();
});

//less语法的转换和css代码的压缩
gulp.task('cssmin', done=> {
  gulp.src(['./src/css/*less', './src/css/*css'])
  .pipe(less())
  .pipe(csso())
  .pipe(gulp.dest('./dist/css'))
  done();
});

//es6代码转换以及代码的压缩
gulp.task('jsmin', done=> {
  gulp.src('./src/js/*.js')
    .pipe(babel({
      //可以判断当前代码的运行环境，并将代码转换到当前环境所支持的代码
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
  done();
});


//复制其它的文件夹
gulp.task('copy', done=> {
  //选择时
  // * 代表光选中当前文件夹里的文件，
  //如果当前文件夹里面还有文件夹（a），则无法选中a文件夹里的文件
  //而 ** 可以选中
  
  gulp.src('./src/images/*')
    .pipe(gulp.dest('./dist/images'))
  gulp.src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))

  gulp.src('./src/a/**')
    .pipe(gulp.dest('./dist/a'))
  done();
});

// gulp.series：按照顺序执行
// gulp.paralle：可以并行计算
//当使用 series() 组合多个任务（task）时，任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。
//当使用 parallel() 组合多个任务（task）时，一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', done=>{
  done();
}));