Gulp基础入门

本文目录：
-1.快速入门

2.常用方法
3.常用插件
4.插件使用方法
5.启动指令优化与热更新

1.快速入门

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

gulp能做什么？

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

如果你先前将 gulp 安装到全局环境中了，请执行 npm rm --global gulp 将 gulp 删除再继续以下操作。
1.检查 node、npm 和 npx 是否正确安装

node --version
npm --version
npx --version

2.安装 gulp 命令行工具

npm install gulp-cli -g

3.在项目目录下创建 package.json

npm init -y

4.安装 gulp，作为开发时依赖项

npm install --save-dev [email protected]
gulp --version
//检查gulp版本

注意一下：因为gulp版本4和3的改动比较大，而且4出的时间不长，很多地方还不成熟，一些代码写法在3中可以正常使用，但是4就不行了，所以在安装的时候最好锁定版本
5.项目根目录下创建 gulpfile.js 文件

const gulp = require('gulp');
gulp.task("first",()=>{
    console.log('第一个gulp任务成功执行了')
    gulp.src("./src/css/base.css")
        .pipe(gulp.dest("./dist/css"))
})

pipe在这里代表“处理”的意思，上面这段就是一个复制粘贴文件的操作，并没有对代码进行什么多余的处理。
task方法的第一个参数是任务的名称
第二个参数是任务的回调函数
这时候就可以在命令行工具中执行命令了，比如gulp first
gulp就会去当前项目的根目录中寻找gulpfile.js文件，然后寻找到first任务，去执行。
使用使用gulp.task去定义任务，也可以通过exports.任务名= function(){}去定义任务，然后在命令行中通过gulp 任务名去执行对应的任务。
gulp --tasks默认会去执行配置文件中的exports.default = function (){}导出的方法。
当然，在实际操作中，我们不可能只是这么简单的应用，gulp的强大功能都是通过插件来实现的，接下来详细解释。

2.常用方法

gulp.task 定义任务
gulp.src 找到执行文件
gulp.dest 执行任务的文件去处
gulp.watch 观察文件是否发生变化

3.常用插件

gulp属于轻量的构建工具，其它的功能基本都是通过插件来进行实现的，以下是一些常用的gulp插件

gulp-htmlmin html文件压缩
gulp-csso 压缩css
gulp-babel Javascript语法转化，这个插件有两个依赖需要同时安装
gulp-less less语法转化
gulp-uglify 压缩混淆Javascript
gulp-file-include 公共文件包含
browersync 浏览器实时同步
gulp-typescript 自动编译typescript

4.插件使用方法

插件使用三部曲：
①npm安装
②在gulpfile.js引用
③通过pipe调用

下面这段代码演示如何压缩html文件
在gulpfile.js添加下面的代码

const htmlmin = require('gulp-htmlmin');  
//html压缩
gulp.task("htmlmin",function() {
    gulp.src("./src/*.html") 
        //参数collapseWhitespace代表压缩html文件的时候，需不需要压缩空格
        .pipe(htmlmin({collapseWhitespace: true}))  
        .pipe(gulp.dest("dist")) 
})

下面这段代码演示如何抽取公共代码
1.如果打算抽取公共代码的话，应该写在压缩代码的前面
2.假如有两个页面，a.html和b.html，它们有共同的页面头部header部分，将header代码抽离出来，写在src文件夹下的common文件夹下的header.html文件中，然后在a.html和b.html的文件中进行引用
@@include('./common/header.html')
接下来在gulpfile.js添加下面的代码

const fileinclude = require('gulp-file-include');  

gulp.task("htmlmin",function() {
    gulp.src("./src/*.html") 
        .pipe(fileinclude())  
        .pipe(htmlmin({collapseWhitespace: true}))  
        .pipe(gulp.dest("dist")) 
})

下面这段代码演示如何执行css任务
1.less语法转换
2.css代码压缩

const less= require('gulp-less');  
const csso= require('gulp-csso');  
gulp.task("cssmin",function() {
//选择css目录下的所有less文件以及css文件
    gulp.src(["./src/css/*.less","./src/css/*.css"]) 
        //将less语法转换为css语法
        .pipe(less())  
        //将css代码进行压缩
        .pipe(csso())  
        //将处理的结果进行输出
        .pipe(gulp.dest("dist/css")) 
})

下面这段代码演示如何执行js任务
1.es6代码转换
2.代码压缩
注意：安装gulp-babel，还需要同时安装这个插件的两个依赖@babel/core和@babel/preset-env
npm install --save-dev gulp-babel @babel/core @babel/preset-env
presets:['@babel/env']参数可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码

const babel= require('gulp-babel');  
const uglify= require('gulp-uglify');  
gulp.task("jsmin",()=> {
    gulp.src("./src/js/*.js") 
        //先转换
        .pipe(babel({presets:['@babel/env']}))  
        //再压缩
        .pipe(uglify())  
        .pipe(gulp.dest("dist/js")) 
})

5.启动指令优化与热更新

当gulp任务越来越多的时候，每次更改代码之后把所有的任务都需要去手动输入指令重新编译太过于麻烦了，这时候我们就需要gulp.watch和gulp-watch来帮助我们实现热更新。（gulp-watch插件可以帮助实现监听文件的增加与删除）
比如说编译js的任务可以写成下面这样

gulp.task('javascript', function () {
  return watch(['src/**/*.js', '!src/**/node_modules/**/*'], { ignoreInitial: false })
    .pipe(debug({ title: 'js src: ' }))
    .pipe(gulp.dest('dist/'));
})

第一次启动gulp的时候，通过一个npm run watch指令就可以启动所有任务。
首先需要在package.json中添加以下代码

"scripts": {
  "dev": "gulp dev",
  "watch": "gulp watch",
  "build": "gulp dev --env build=1"
},

然后在gulp的配置文件gulpfile.js中添加以下代码

gulp.task('dev', ['plugin'])
gulp.task('watch', ['dev'], () => {
  gulp.start('typescript')
  gulp.start('image')
  gulp.start('javascript')
  gulp.start('less')
  gulp.start('wxml')
  gulp.start('wxss')
  gulp.start('wxs')
  gulp.start('json')
})

接下来，我们就可以尽情享受gulp带给我们的便捷，愉快的敲代码了。