gulp
项目做好之后，gulp是提供压缩代码、编译sass和合并文件的工具。
前端的构建工具常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。
npm i gulp -g
gulp -v # 测试是否安装成功
安装gulp依赖包
npm i gulp --save-dev # 因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖
// 定义一个任务 - 定义一个函数 function fn(){ console.log(123); } // 导出这个任务即可 exports.fn = fn // 任务名称是fn，执行的函数是fn
在命令行中执行这个任务：gulp fn
如果任务名称定义成default，那么在执行任务的时候就不用输入任务名称了，直接使用gulp就能执行：
// 定义一个任务 - 定义一个函数 function fn(){ console.log(123); } // 导入任务 exports.default = fn // 任务名称是default，执行的函数是fn
// 导入gulp，并将series方法解构出来 const {series} = require('gulp'); // 定义任务1 function print1(cb){ console.log('this is print task first'); cb() } // 定义任务2 function print2(cb){ console.log('this is print task second'); cb() } // 因为两个任务都没有实际的意义，所以需要加回调函数才行 // 将任务导出并按照排好的顺序执行 exports.default = series(print1, print2)
如果要让两个任务是异步执行的，需要用到gulp的parallel接口：
// 导入gulp，并将parallel方法解构出来 const {parallel} = require('gulp'); // 定义任务1 function print1(cb){ console.log('this is print task first'); cb() } // 定义任务2 function print2(cb){ console.log('this is print task second'); cb() } // 将任务导出并按照排好的顺序执行 exports.default = parallel(print1, print2)
既然gulp的所有操作都是基于流的，就需要将上一步的结果流向下一个操作，中间需要用到管道：
上一步的操作
.pipe(下一步的操作)
编译sass
需要依赖一个插件：gulp-sass
下载这个插件：npm i gulp-sass
导入列子：
const sass = require('gulp-sass') // 导入的gulp-sass其实是一个函数，调用就能进行编译
//解构导入gulp
const {src,dest} = require('gulp')
function compileSass(cb){
//将sass读取出来才能进行编译
//读取文件 - 使用gulp中的src方法
src('./sass/test)
//编译
//先使用一根管子接过来进行处理 - pipe()
.pipe(sass())
//保存 - 使用管子接过来，使用dest()方法保存
.pipe(dest('./css')) // dest方法接受的参数是一个文件夹路径，文件夹不存在会自动创建
cb()
}
exports.default = compileSass
合并文件
依赖插件：gulp-concat
导入
const concat = require('gulp-concat')
// 重命名 - 插件：gulp-rename
const rename = require('gulp-rename')
定义任务
function concatFile(c){
// 读取文件
// src('./css/*.css') // *代表所有
// 合并
.pipe(concat('c.css'))
// 重命名
.pipe(rename({
prefix:'--'
}))
// 保存
.pipe(dest('./css'))
c()
}
//导出任务
exports.default = concatFile
function concatJs(cb){ src('./js/*.js') .pipe(concat('all.js')) .pipe(dest('./js')) cb() } exports.default = concatJs
压缩css - 插件：gulp-clean-css
下载：
导入：css案列
const cleanCss = require('gulp-clean-css')
// 定义任务
function compress(cb){
src('./css/--c.css')
.pipe(cleanCss())
.pipe(rename({
suffix:".min"
}))
.pipe(dest('./css'))
cb()
}
// 导出任务
exports.default = compress
压缩html
插件：gulp-htmlmin
导入
const htmlmin = require('gulp-htmlmin')
function compressHtml(cb){
src('./html/a.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(rename({
suffix:".min"
}))
.pipe(dest('./html'))
cb()
}
exports.default = compressHtml
压缩js：gulp-uglify
const uglify = require('gulp-uglify')
function compressJs(cb){
src('./js/all.js')
.pipe(uglify())
.pipe(rename({
suffix:".min"
}))
.pipe(dest('./js'))
cb()
}
exports.default = compressJs
给css加前缀：gulp-autoprefixer
给css加前缀，将一些不兼容的css属性添加前缀让各个浏览器兼容
注意：
{
browsers:["last 5 version","iOS > 3","Firefox > 2"]
}
会出现一个提示，希望将这个配置写在package.json中：
"browsersList":[
"last 2 version",
"iOS > 7",
"Fixefox > 20"
]
const autoprefixer = require('gulp-autoprefixer')
function addPre(cb){
src('./css/test.css')
.pipe(autoprefixer())
.pipe(rename({
prefix:'jianrong-'
}))
.pipe(dest('./css'))
cb()
}
exports.default = addPre
es6转es5 - 插件有3个，只要插件：gulp-babel - 只要导入这个插件即可
const babel = require('gulp-babel')
function es6ToEs5(cb){
src('./js/es6.js')
.pipe(babel({
presets: ['es2015'] // 必须要有这个参数，否则会报错
}))
.pipe(rename('es5.js'))
.pipe(dest('./js'))
cb()
}
exports.default = es6ToEs5
清空目标文件夹：gulp-clean
const clean = require('gulp-clean')
function cleanDir(cb){
src('./sass')
.pipe(clean())
cb()
}
exports.default = cleanDir
gulp-load-plugins：打包插件（里面包含了其他所有插件） - 代替的插件必须是下载好的
半自动化构建项目 - watch
const {src, dest, watch, series} = require('gulp')
const $ = require('gulp-load-plugins')()
function compressCss(cb){
src('./src/css/index.css')
.pipe($.cleanCss())
.pipe($.rename({
suffix:".min"
}))
.pipe(dest('./dist/css'))
cb()
}
// 监视任务：监视文件发生变化的时候，就执行这个压缩任务
function watcher(cb){
watch('./src/css/index.css',{ignoreInitial:false,delay:5000},compressCss)
// watch这个方法可以调用多次
// watch('./src/js*.js',uglifyJs)
cb()
}
// 清空目标文件夹
function cleanDir(cb){
src('./dist',{allowEmpty:true})// 允许为空
.pipe($.clean())
cb()
}
exports.default = series(cleanDir,watcher)
// 处理：编译sass、添加前缀、压缩
全自动化构建项目
每个任务都要添加即时更新
.pipe(connect.reload())
插件open：自动打开浏览器 npm i opan
// 解构gulp const {src,dest,watch,series,parallel} = require('gulp'); const $ = require('gulp-load-plugins')(); const open = require('open') // 定义任务 // css - 添加前缀、压缩 // js - es6~es5、压缩 // html - 压缩 function handlerCss(cb){ src('./src/css/*.css') .pipe($.autoprefixer()) .pipe($.cleanCss()) .pipe($.rename({ suffix:".min" })) .pipe(dest("./dist/css")) .pipe($.connect.reload()) cb() } function handlerJs(cb){ src('./src/js/*.js') .pipe($.babel({ "presets":['es2015'] })) .pipe($.uglify()) .pipe($.rename({ suffix:".min" })) .pipe(dest("./dist/js")) .pipe($.connect.reload()) cb() } function handlerHtml(cb){ src('./src/*.html') .pipe($.htmlmin({ collapseWhitespace:true })) .pipe(dest('./dist')) .pipe($.connect.reload()) cb() } function clear(cb){ src('./dist',{ allowEmpty:true }) .pipe($.clean()) cb() } // 全自动化构建项目：自动刷新浏览器 - gulp-connect function server(cb){ $.connect.server({ root:'./dist', port:9527, livereload:true }) watch('./src/*.html',{ignoreInitial:false},handlerHtml) watch('./src/css/*.css',{ignoreInitial:false},handlerCss) watch('./src/js/*.js',{ignoreInitial:false},handlerJs)
setTimeout(function () {
open("http://localhost:9527/index.html");
},500)
// 自己计算机的服务器，访问：localhost cb() } // function openBrowser(cb){ // cb() // } exports.default = series(clear，server)
浙公网安备 33010602011771号