（2020年11月10日学习笔记）项目中gulp工具使用流程

项目中gulp工具使用流程

一：安装全局gulp命令行工具

npm i gulp-cli -g

二：初始化项目(生成package.json文件)

npm init

三：安装局部gulp

npm gulp -D

四：创建项目子文件夹

五：创建gulpfile.js文件

六：在gulpfile.js文件中创建任务

​ 1：制定paths路径（分为src（源）与 dist（或public）等目标路径），需要制定路径的有html，js，css，imgs，libs等src源里面的文件夹

​

​ 2：创建html任务

​ 需要安装的包为：

npm i gulp-htmlmin -D

在gulpfile.js中引入

const htmlmin = require('gulp-htmlmin')

3：创建css任务

需要安装的包为

npm i gulp-autoprefixer -D    //给需要兼容的css样式自动加上兼容性前缀
npm i gulp-clean-css -D    //压缩css

在gulpfile.js中引入

//引入处理css的包
const autoprefixer = require('gulp-autoprefixer')
const cleanCss = require('gulp-clean-css')

4：创建js任务

需要安装的包为

//先ES6转ES5，然后再压缩，最后在导出那里加上js任务

npm i gulp-uglify -D   //安装压缩js的包

npm i gulp-babel @babel/core @babel/preset-env -D    //安装ES6转ES5的包

在gulpfile.js中引入

//引入处理js的包
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')

5：创建imgs任务和libs任务，因为不需要对imgs和libs做任何的操作，所以直接移动文件

//制定imgs任务
const imgs = () => {
    return gulp.src(paths.imgs.src)
        .pipe(gulp.dest(paths.imgs.dest))
}

//制定libs任务
const libs = () => {
    return gulp.src(paths.libs.src)
        .pipe(gulp.dest(paths.libs.dest))
}

6：创建服务器

需要安装的包为

npm i gulp-connect -D

在gulpfile.js中引入

//引入创建服务器的包
const connect = require('gulp-connect')

7：创建监听任务

//创建监听任务，修改相应的文件后，自动重启对应的任务
const watch = () => {
    // watch第一个参数是监听文件路径，第二个参数是要重启的任务名
    gulp.watch(paths.html.src, html)
    gulp.watch(paths.css.src, css)
    gulp.watch(paths.js.src, js)
}

8：创建删除文件的任务

需要安装的包为

npm i del -D

在gulpfile.js中引入

//引入删除文件的包
const del = require('del')

9：任务导出与默认任务，同步执行与异步执行

//把制定好的任务导出  使用的是 modele.exports,,series同步，parallel异步
module.exports.default = gulp.series(clean,gulp.parallel(html,css,js,imgs,libs,server,watch))

10：服务器代理跨域

需要安装的包为：（这里需不需要 -D 根据项目的具体要求）

npm i http-proxy-middleware -D

在gulpfile.js中引入（解构赋值）

const  { createProxyMiddleware } = require('http-proxy-middleware')

在sever任务中

使用middleware方法

11：使用sass对css代码进行优化
（这里引用熊大林老师的gulp4.0的使用和gulpfile.js任务配置博客）

需要安装的包为

npm i node-sass gulp-sass -D

首先，path对象里css的src属性路径要把后缀名css改成scss，再修改css任务

const cleanCss = require('gulp-clean-css')
const autoPrefixer = require('gulp-autoprefixer')
const sass = require('gulp-sass')

const css = () => {
    return gulp.src(path.js.src)
    	.pipe(sass())
        .pipe(autoprefixer({
        	presets: ['@babel/env']
    	}))
       .pipe(cleanCss())
       .pipe(gulp.dest(path.css.dest))
}