文章目录

• 前言
• 一、基础配置
• 二、html任务
• • 1.下载
  • 2.gulpfile.js代码编写
  • 3.抽取公共代码、执行任务
• 三、CSS任务
• • 1.下载
  • 2.gulpfile.js代码编写
  • 3.执行任务
• 四、js任务
• • 1.下载
  • 2.gulpfile.js代码编写
  • 3.执行任务
• 五、复制文件夹
• • 1.gulpfile.js代码编写
  • 2.执行任务
• 六、构建任务

---

前言

学习笔记：
gulp的使用、安装、插件等。
gulpfile.js的编写

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、基础配置

1. 新建gulp-demo文件夹，在该文件夹下新建src文件夹、list文件夹和gulpfile.js文件。
2. 将所需项目放到src文件夹下
3. 在gulpfile文件中编写代码
4. 在power’shell中输入 npm install gulp-cli -g 全局安装命令行

//引用gulp模块
const gulp = require('gulp');
//使用gulp.task建立任务
//1.任务的名称
//2.任务的回调函数
gulp.task('first',(done)=>{
	console.log("第一个gulp任务");
  	//1.使用gulp.src获取要处理的文件
 gulp.src("./src/css/public.css").pipe(gulp.dest("dist/css"));//将public.css文件复制到dist文件夹下
  done();//结束回调
})

测试：在gulp-demo文件夹下打开powershell窗口，输入 gulp first——返回‘第一个gulp任务’，切dist文件夹下多了css文件夹和public.css文件

安装完 gulp-cli命令行后，才可以用gulp （任务名称）的方式执行单个任务

---

二、html任务

1.html文件中代码的压缩操作
2.抽取html文件中的公共代码

1.下载

• 压缩html代码：npm install gulp-htmlmin

• 抽取html中的公共代码：npm install gulp-file-include

在根文件夹下打开 powershell，输入上述代码

2.gulpfile.js代码编写

//引用
const htmlmin = require('gulp-htmlmin');//压缩代码
const fileinclude = require("gulp-file-include");//抽取公共代码
//任务
gulp.task('htmlmin',(done) => {
	 gulp
    .src("./src/*.html")
    .pipe(fileinclude())//调用公共代码
    .pipe(htmlmin({ collapseWhitespace: true })) //压缩html文件中的代码
    .pipe(gulp.dest("dist")); //输出到dist文件夹中
  done();
});

3.抽取公共代码、执行任务

1. 在src文件夹下新建common文件夹，在common文件夹下新建header.html文件，将html页面中的公共头部代码剪切到header.html文件中。
2. 在去掉公共头部代码的地方，重新引入：@@include(’./common/header.html’)
3. 在gulp-demo文件夹中打开powershell，输入gulp htmlmin ，执行htmlmin任务
4. 执行成功后，在dist文件夹中多出压缩后的html文件，且头部代码调用成功，一起压缩进代码
   

---

三、CSS任务

1.less语法转换
2.css代码压缩

1.下载

• less语法转换：npm install gulp-less

• 压缩css代码：npm install gulp-csso

2.gulpfile.js代码编写

//引用
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()) //将less语法转换为css语法
    .pipe(csso()) //将css代码进行压缩
    .pipe(gulp.dest("dist/css")); //将处理的结果进行输出
  done();
});

3.执行任务

• 在gulp-demo文件夹下，打开powershell,输入 gulp cssmin ,执行cssmin任务。

执行成功后：

• src文件夹下的.less文件转换为.css,完成语法转换
• src文件夹下的less和css文件压缩成功

---

四、js任务

1.es6代码转换
2.代码压缩

1.下载

• es6代码转换：npm install gulp-babel @babel/core @babel/preset-env

• 压缩js代码：npm install gulp-uglify

2.gulpfile.js代码编写

//引用
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
//任务
gulp.task("jsmin", (done) => {
  gulp
    .src("./src/js/*.js")
    .pipe(
      babel({
        //判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码(比如将不支持es6的改为es5代码)
        presets: ["@babel/env"],
      })
    )
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"));
  done();
});

3.执行任务

• 在powershell中输入 gulp jsmin ——执行jsmin任务

执行结果：

• 完成es6代码转化（例如：const let 转变为var）
• 实现js代码压缩

---

五、复制文件夹

1.gulpfile.js代码编写

gulp.task("copy", () => {
  gulp.src("./src/images/*").pipe(gulp.dest("dist/images"));
  gulp.src("./src/lib/*").pipe(gulp.dest("dist/lib"));
});

2.执行任务

• 在powershell中输入 gulp copy
• 执行成功后——文件夹复制成功

---

六、构建任务

上面的任务都是分别执行的，以下代码可以实现执行一个任务，其他任务自动执行

gulp.task("default", ["htmlmin", "cssmin", "jsmin", "copy"]);

• 执行任务：在powershell中输入——gulp default
  
  执行结果：报错（上图）
  
  经网上查找，是gulp4版本原因

解决方法：

参考资料：https://www.jianshu.com/p/c30ff8592421

解决后：

PS:任务名称是default，在powershell中可以直接输入gulp，命令行会自己查找default任务并执行。