//html任务

$ npm install --save  gulp-htmlmin

$ npm install --save-dev gulp-file-include

$ npm install gulp-less

$ npm i gulp-csso

$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

$ npm i gulp-uglify

Html任务

1. HTML文件中代码 的压缩操作 ： gulp-htmlmin
2. 抽取html 文件中的公共代码，修改时，只修改单独文件就可以了
3. 下载 $ npm install --save  gulp-htmlmin
4. 引用插件：Const htmlmin = require(‘gulp-htmlmin’)
5. 使用插件：
6. Gulp.task(‘html’,() => {

gulp.src(‘.src/*.html’)  // 获取所有的html文件

.pipe(htmlmin({collapseeWhitespace: true})) // 使用 htmlmin 压缩处理文件

     .pipe(gulp.dest(‘dest’))；// 输出到dist目录下

})

1. 命令行 执行：gulp htmlmin
2. 任务执行完成

2，html文件中的公共代码抽取，便于维护，这段代码有问题的时候，直接修改这段公共就可以了，不用改所有的

1. 下载 $ npm install --save-dev gulp-file-include
2. 引用：const  fileinclude = require(‘gulp-file-include’);
3. 调用插件：gulp中任务执行是有顺序的，在压缩之前，要抽取公共代码

Gulp.task(‘html’,() => {

gulp.src(‘.src/*.html’)  // 获取所有的html文件

  .pipe(fileinclude())// 调用fileinclude()

.pipe(htmlmin({collapseeWhitespace: true})) // 使用 htmlmin 压缩处理文件

     .pipe(gulp.dest(‘dest’))；// 输出到dist目录下

})

1. 调用后，公共代码抽取：在src目录中，新建common文件夹，存html公共代码(比如头部，在common里新建一个文件：header.html, 把公共的头部代码粘贴过去；删掉原页面中的)，
2. 在每一个页面引入刚才抽取的公共页面 @@include(‘./common/header.html’);
3. 在命令行执行：gulp htmlmin
4. 执行完成
5. 到dist目录查看：抽取的公共代码，已经被包含在自己的html页面里了

// 建立css 任务

//1，less 语法转换

//2，css代码压缩

1. 下载 $ npm install gulp-less
2. 引用 const less = require(‘gulp-less’);
3. 调用

// 建立任务

Gulp.task(‘cssmin’, () => {

Gulp.src(‘./src/css/*.css’，‘./src/css/*.less’); //将less语法转为css；获取所有less文件

.pipe(less()) // 转换

.pipe(gulp.dest(‘dist/css’)) //处理的结果输出

})

1. 执行 gulp cssmin
2. 在dist中查看
3. 问题：css下也有很多less文件，要同时拷贝css,less; 可以同时写多个文件
4. 对所有的文件压缩：下载插件 $ npm i gulp-csso
5. 引用它 const csso = require(‘gulp-csso’);
6. 使用它：

Gulp.task(‘cssmin’, () => {

Gulp.src(‘./src/css/*.css’，‘./src/css/*.less’); //将less语法转为css；获取所有less文件以及css 文件

.pipe(less()) // less转换为css

.pipe(csso()) // 调用，压缩css代码

.pipe(gulp.dest(‘dist/css’)) //处理的结果输出

})

1. 命令行执行：glup cssmin

Js 任务

1. ES6代码转化
2. 代码压缩

Gulp.task(“jsmin”,() => {

   Gulp..src(‘./src/js/*.js’)

})

1. 下载插件：$ npm install --save-dev gulp-babel @babel/core @babel/preset-env
2. 引用：const babel = require(‘gulp-babel’);
3. 调用：.pipe(babel({

//判断代码的运行环境，将代码转换为当前运行环境支持的代码

     Presets: [‘@babel/env’]

}))

1. 输出：.pipe(gulp.dest(‘dist/js’))
2. 执行：gulp jsmin
3. 压缩js代码：下载插件 $ npm i gulp-uglify
4. 使用：const uglify = require(“gulp-uglify”);
5. 调用插件：.pipe(uglify) // 获取所有Js 文件，西安转ES6，在处理
6. 输出到dist
7. 执行 gulp jsmin

把剩下的 image 和lib 文件夹 复制到 dist目录下：

gulp.task(‘copy’, () => {   // 建立copy任务

gulp.src(‘./src/images/*’)  //获取文件

   .pipe(gulp.dest(‘dist/images’)); //复制到dist

gulp.src(‘./src/lib/*’)

   .pipe(gulp.dest(‘dist/lib’));

})

命令行执行：gulp copy

这几个任务，很多，分别编写，分别执行

想要执行一个，其他的也跟着执行

我们可以编写一个 bulid 任务，执行它，其他也跟着执行

gulp.task(‘default’, [‘htmlmin’, ‘cssmin’, ’jsmin’, ‘copy’]) 

// 当我们执行default任务时，其他任务跟着执行, 如果你的名字是default，可以省略，再在命令行执行gulp, 回车就可以了

{

  "name": "description",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",   // 项目的主入口文件  主模块

  "scripts": {   // 命令的别名，当执行命令很长，在命令行使用时很麻烦 使用 npm run + 别名

    "test": "echo \"Error: no test specified\" && exit 1"

},

“keywords”: [],  // 关键字，可以用关键字描述

  "author": "",

  "license": "ISC" // 开放源代码的协议=项目遵循的协议

}