Gulp介绍

自动化构建工具，可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。
gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。

官网网站:gulpjs.com/

中文网:www.gulpjs.com.cn/

插件官网:gulpjs.com/plugins/

特点

任务化
简易的API
强大的插件

Gulp安装

注意：此安装方式是windows操作系统
Mac系统：安装需要在开头加上sudo ，在Mac上你当前的用户虽然是管理员，但并不是root用户，所以很多时候是需要通过输入当前用户密码来实现临时用户切换的。这个不光在你使用终端时候，在设置系统选项，安装软件等时候如果需要特殊权限，会让你输入密码，习惯就好。很多桌面版Linux系统也是同样的用户体系结构，当前用户并不是root用户，而且也没有方法获得root用户的密码，只能在需要授权的时候输入密码临时切换。

//初始化项目package.json
npm init

//全局安装gulp
npm install gulp -g

//检查gulp是否安装成功
gulp -v

Gulp使用

1：通过gulp.task()注册任务
2：通过gulp.src()方法获取到想要处理的文件地址
3：把文件流通过pipe方法导入到gulp的插件中
4：把经过插件处理后的流在通过pipe方法导入到gulp.dest()中
5：gulp.dest()方法则把流中的内容写入到文件中

// 注册任务
gulp.task("first", callback => {
    //获取文件
    gulp.src("./base.js").pipe(gulp.dest("./dist/css"));
    //执行回调函数
    callback();
})

API使用

Gulp API不多，建议直接上中文文档查看

名称	作用
gulp.task(name[, deps], fn)	创建任务 (此API已经不是推荐模式)
gulp.src()	要处理的文件地址
gulp.pipe()	管道流，接通源头文件与目标文件的输出
gulp.dest()	输出文件到指定目录，如果没有则创建

插件使用

HTML任务

1：抽取html文件中的公共代码gulp-file-include
2：html文件中代码的压缩操作gulp-htmlmin

//安装插件
npm i gulp-file-include

npm i gulp-htmlmin

//建立任务
gulp.task("htmlmin", cb => {
    //获取文件
    gulp.src("../*.html")

        //抽取公共
        .pipe(gulpfileinclude())

        //压缩
        .pipe(gulphtmlmin({
            collapseWhitespace: true //是否压缩空格
        }))
        //抽取压缩输出
        .pipe(gulp.dest("../dist"))
    //回调
    cb();
})

完成代码后，在终端当中执行：

gulp htmlmin

既可以在dist下目录查看到压缩之后的html文件。

CSS任务

1：less语法转换gulp-less
2：css代码压缩gulp-csso

//安装插件
npm i gulp-less

npm i gulp-csso

安装完成插件后执行下面的代码。

//注册任务
gulp.task("cssmin", cb => {
    //获取文件
    gulp.src(["../css/*.css", "../css/*.less"])
        .pipe(gulpless()) //编译less文件 为css文件
        .pipe(gulpcss()) //压缩css文件
        .pipe(gulp.dest("../dist")); //文件输出
    cb();
})

JS任务

1：es6代码转换gulp-babel
2：代码压缩gulp-uglify

//安装插件
npm i gulp-uglify

npm i gulp-babel

安装完成后，我们可以在package.json文件中检查一下：

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.2",
    "gulp-babel": "^8.0.0",
    "gulp-css": "^0.1.0",
    "gulp-file-include": "^2.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-less": "^5.0.0"
  }
}

养成一个良好的习惯，尽可能的在每次安装插件后都检查一下package.json文件，看一下插件是不是在里面。

安装完成后，可以完成下面的代码：

const gulp = require("gulp");
const gulpbabel = require('gulp-babel');
const gulpuglify = require("gulp-uglify");

// 建立任务：转换ES6语法，压缩js文件
gulp.task('jsmin', callback => {
    // 获取文件.js
    gulp.src('../js/*.js')
        // 转换es6代码
        .pipe(gulpbabel({
            // 判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        // 压缩js文件
        .pipe(gulpuglify())
        // 将压缩的文件输出
        .pipe(gulp.dest('../dist'))
    callback();
})

Gulp入门使用

Gulp介绍

特点

Gulp安装

Gulp使用

API使用

插件使用

HTML任务

CSS任务

JS任务