第三方模块Gulp的基本使用

Gulp

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

Gulp能做什么

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

Gulp使用

1.使用npm install --save-dev gulp下载gulp库文件
2.在项目根目录下新建一个名为gulpfile.js的文件
3.重构项目的文件夹结构 src目录放置源代码文件(以前的全部文件都放在这个目录) dist目录放置构建后文件
4.在gulpfile.js文件中编写任务.
5.在命令行工具中执行gulp任务

Gulp中提供的方法

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

//在gulpfile.js文件中编写任务.
const gulp = require('gulp');
  // 使用gulp.task()方法建立任务
 gulp.task('first', () => { //第一个参数是当前任务的名字，第二个参数是一个回调函数，执行任务实际上就是执行回调函数
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css')); //注意这里是链式操作。pipe有管道的意思，在当前代码是处理的意思，我们需要将处理的代码放到pipe里面，它就能够执行里面的代码
    //这里的意思是获取到一个文件直接输出到硬盘，并没有加处理的代码，相当于复制粘贴
 });

运行Gulp任务

步骤
1.安装gulp-cli命令行工具

npm install gulp-cli -g

2.在当前项目文件夹打开命令行，运行gulp命令执行任务

gulp 任务名

Gulp插件

Gulp的其他功能（压缩，语法转换等）需要通过插件来完成
常用插件：
gulp-htmlmin ：html文件压缩 npm install --save gulp-htmlmin
gulp-csso ：压缩css npm install gulp-csso --save-dev
gulp-babel ：JavaScript语法转化 npm install --save-dev gulp-babel @babel/core @babel/preset-env
gulp-less: less语法转化 npm install gulp-less
gulp-uglify ：压缩混淆JavaScript npm install --save-dev gulp-uglify
gulp-file-include 公共文件包含(提取) npm install --save-dev gulp-file-include
browsersync 浏览器实时同步

插件的使用步骤
1.npm insatll下载对应的插件
2.require引入插件
3.调用插件,用的时候去查这个插件的文档就可以

在gulpfile.js文件中编写gulp任务

• html任务（抽取公共代码、压缩html文件）
  抽取头部公共代码的步骤:
  在src下新建一个common文件夹用来存放公共代码，接着新建一个header.html文件，一个空白文件不需要骨架。然后将其他页面中用到的公共header部分放到这里。最后将通过gulp-file-include的语法将头部引入到要用到的地方。写法是@@include（‘头部路径/头部文件名’）。最最后执行gulp任务就可以了。

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
gulp.task('htmlmin',()=>{ //这种写法会有警告Did you forget to signal async completion? 用css任务的done或者加async await写法可以解决
    gulp.src('./src/*.html')
    //先抽取公共代码再压缩，顺序不能颠倒
    .pipe(fileinclude())
    //压缩html文件中的代码，collapseWhitespace折叠空格
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});

• css任务（less语法转换、压缩css代码）

//const gulp = require('gulp');
const less = require('gulp-less');
const csso = require('gulp-csso');
gulp.task('cssmin',done=>{
    gulp.src(['./src/css/*.less','./src/css/*.css']) //选择css目录下的所有less文件和css文件
    .pipe(less())
    .pipe(csso())
    .pipe(gulp.dest('dist/css'));
    done();
})

• js任务（es6代码转换、代码压缩）

//const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('jsmin',async ()=>{
    await gulp.src('./src/js/*.js')
    .pipe(babel({
        //它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

• 复制任务（将项目中images、lib文件复制去dist目录）

//const gulp = require('gulp');
gulp.task('copy',done=>{
    gulp.src('./src/images/*')
    .pipe(gulp.dest('dist/images'));

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

• 构建任务（一次性执行上面写的任务）

gulp.task('default',gulp.parallel('htmlmin','cssmin','jsmin','copy'));

运行时可以直接写gulp，就是默认执行这个任务。

gulp.parallel(); //可以并行计算
gulp.series(); //按照顺序执行
/*例子-----------*/
gulp.task('default',gulp.series(gulp.series('htmlmin','cssmin'),'jsmin','copy')); //一部分是顺序任务，一部分是可以并行的任务