gulp（接在SASS之后）
昝卓
gulp
解决项目做好以后的一些事情：
- 压缩图片
- 压缩js
- 压缩css
- 编译sass
- 合并文件…
人为效率低，所以学习gulp
不止有gulp这一种工具,Grunt(跟不上时代),Webpack（暂时不学）
中文网址：
https://www.gulpjs.com.cn/docs/getting-started/quick-start/
安装：
npm i gulp -g
检测：
gulp --version
gulp的快速入门
在项目内写个gulpfile.js
注意：文件名称是固定的，就是专门用来写打包项目的程序
按照文档提示写一段简单的：
function fn(cb){
console.log("这是fn");
cb();
}
//导出
exports.default = fn;
运行还需要一个插件：
npm i gulp
然后运行：
gulp
得到结果：
[10:36:34] Starting 'default'...
这是fn
[10:36:34] Finished 'default' after 3.9 ms
gulp的特点：
1.基于任务的:
要进行的任何一个操作，都应该是任务（函数fn就是一个任务，言外之意定义一个函数就好了）
这个任务想要gulp运行，需要将任务导出
exports.default=fn;//导出的任务名称叫default-默认的
，直接使用gulp就能运行
不是默认的：
exports.fn = fn;
执行需要命令gulp fn
gulp的方法
series和parallel方法
const {series,parallel} = require("gulp");//将gulp.js里面的series解构（es6语法）成series变量
//定义任务1
function print1(cb){
console.log("任务1");
cb();
}
//定义任务2
function print2(cb){
console.log("任务2");
cb();
}
//导出任务，使用series
exports.default=series(print1,print2);
gulp命令直接执行：
[10:54:40] Using gulpfile G:\DownLoad\PHPstudy\PHPTutorial\WWW\gulp\gulpfile.js
[10:54:40] Starting 'default'...
[10:54:40] Starting 'print1'...
任务1
[10:54:40] Finished 'print1' after 2.15 ms
[10:54:40] Starting 'print2'...
任务2
[10:54:40] Finished 'print2' after 920 μs
[10:54:40] Finished 'default' after 8.38 ms
series方法做的是同步任务—一个任务开始到结束才开始下一个任务
parallel:异步任务，一起开始，不一定谁先结束
任务分析：sass----->编译成css----->css压缩：这种情况使用同步任务
任务分析：压缩CSS，压缩js：互不干扰，异步任务
src和dest方法
src()用来读取文件
dest()方法时保存文件的
const {src,dest} = require("gulp");
function readAndWrite(cb){
cb();
}
gulp的第二个特点：基于流的
const { src,dest } = require("gulp");
function readAndWrite(cb){
//读取css文件夹
src("./demo1/css/index.css");//读取到内存中
dest("./"); //保存到跟css文件夹同级的地方
cb();
}
exports.default=readAndWrite;
这时还需要管道pipe()方法：
const { src,dest } = require("gulp");
function readAndWrite(cb){
//读取css文件夹
src("./demo1/css/index.css").pipe(dest("./"));
cb();
}
exports.default=readAndWrite;
压缩css文件
下载插件gulp-clean-css
压缩
const {src,dest} = require("gulp");
const cleanCss =require("gulp-clean-css");//导入进来的都是一个函数，调用就能使用
function compress(cb){
//读取文件
//通过管道流向压缩
//通过管道流向文件保存
src("./demo1/css/index.css").pipe(cleanCss()).pipe(rename()).pipe(dest("./"));
cb();
}
exports.default=compress;
//gulp执行
改名字
改名字需要下载插件gulp-rename(也使用管道流向rename)
插件不会用查下面的网站
https://www.npmjs.com/
const {src,dest} = require("gulp");
const cleanCss =require("gulp-clean-css");//导入进来的都是一个函数，调用就能使用
const rename = require("gulp-rename");
function compress(cb){
//读取文件
//通过管道流向压缩
//通过管道流向改名
//通过管道流向文件保存
src("./demo1/css/index.css").pipe(cleanCss()).pipe(rename("./demo1/index.min.css")).pipe(dest("./"));
cb();
}
exports.default=compress;
rename函数里面也可以是对向形式，其中suffix表示前缀：
const {src,dest} = require("gulp");
const cleanCss =require("gulp-clean-css");//导入进来的都是一个函数，调用就能使用
const rename = require("gulp-rename");
function compress(cb){
//读取文件
//通过管道流向压缩
//通过管道流向改名
//通过管道流向文件保存
src("./demo1/css/index.css").pipe(cleanCss()).pipe(rename({
suffix:".aaa"
})).pipe(dest("./"));
cb();
}
exports.default=compress;
压缩sass文件
下载插件：npm i gulp-sass
套路和上面差不多：
//导入插件
const {src,dest} = require("gulp");
const sass =require("gulp-sass");
//定义任务
function compile(cb){
//读取文件
src("./demo1/sass/list.scss").pipe(sass()).pipe(dest("./demo1/css/"));//dest参数必须是一个文件夹
cb();
}
//导出任务
exports.default = compile;
与压缩结合的话是同步执行：
//导入插件
const {src,dest,series} = require("gulp");
const sass =require("gulp-sass");
const cleanCss =require("gulp-clean-css");
const rename = require("gulp-rename");
//定义任务
function compile(cb){
//读取文件
src("./demo1/sass/list.scss").pipe(sass()).pipe(dest("./demo1/css/"));//dest参数必须是一个文件夹
cb();
}
function compress(cb){
//读取文件
//通过管道流向压缩
//通过管道流向改名
//通过管道流向文件保存
src("./demo1/css/list.css").pipe(cleanCss()).pipe(rename({
suffix:".min"
})).pipe(dest("./"));
cb();
}
exports.default = series(compile,compress);
合并文件，压缩js,压缩html
压缩js
下载插件：gulp-uglify压缩js文件
const {src,dest} = require("gulp");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
function handleJs(cb){
src("./demo1/js/index.js").pipe(uglify()).pipe(rename({
suffix:".min"
})).pipe(dest("./demo1/js/"));
cb();
}
exports.default= handleJs;
压缩HTML
需要用到插件gulp-htmlmin
//压缩HTML
const { src,dest } = require("gulp");
const htmlmin = require("gulp-htmlmin");
const rename = require("gulp-rename");
function handleHtml(cb){
src("./demo1/index.html").pipe(htmlmin()).pipe(rename({
suffix:".min"
})).pipe(dest("./demo1/"));
cb();
}
exports.default = handleHtml;
上面这样形成的index.min.html形成的文件没压缩
继续查那个网站，查出{collapseWhitespace:true}参数需要加在htmlmin方法内（改方法默认不压缩）
文件合并(js、css)
下载 gulp-concat插件
//合并插件
const {src,dest} = require("gulp");
const concat = require("gulp-concat");
const rename =require("gulp-rename");
function concatFiles(cb){
//读取css文件夹下所有后缀为css的文件
//实参为合并后的文件名字
//加后缀
src("./demo1/css/*.css").pipe(concat("a.css")).pipe(rename({
prefix:"------"
})).pipe(dest("./demo1/css"))
cb();
}
exports.default = concatFiles;
给css加兼容前缀
npm init -y记录我们下过哪些插件
需要下载gulp-autoprefixer插件
const {src,dest} = require("gulp");
const rename = require("gulp-rename");
const autoprefixer = require("gulp-autoprefixer");
function addPrefix(cb){
src("./index.css").pipe(autoprefixer({
browsers:["last 5 version","ios>3","Firefox>2"]
})).pipe(rename({
prefix:'---'
})).pipe(dest("./"));
cb();
}
exports.default = addPrefix;
browsers:[“last 5 version”,“ios>3”,“Firefox>2”]为版本要求：兼容到·最后5个版本，ios兼容到版本3以上，火狐兼容到版本2以上
上面的会出现红色报错：
处理方法：autoprefixer里面的值删除，将“browsers”:[“last 5 version”,“ios>3”,“Firefox>2”]放入package.json文件中，然后删除之前产生的文件，再运行，就不会出现红色报错
ES6转ES5
下载gulp-babel@7.0.1插件
这个插件还依赖两个插件：babel-core,babel-preset-es2015
npm i gulp-babel@7.0.1 babel-core babel-preset-es2015
const {src,dest} = require("gulp");
const rename = require("gulp-rename");
const babel = require("gulp-babel");
function es6ToEs5(cb){
src("./index.js").pipe(babel({
presets:["es2015"]//不加这个相当于不转
})).pipe(rename({
suffix:"-es5-"
})).pipe(dest("./"));
cb();
}
exports.default = es6ToEs5;
index.js
for(let i =1 ; i<=3;i++){
setTimeout(function(){
console.log(i);
})
}
index-es5-.js(转成的文件)：
"use strict";
var _loop = function _loop(i) {
setTimeout(function () {
console.log(i);
});
};
//ES6语法转ES5
for (var i = 1; i <= 3; i++) {
_loop(i);
}
清空目标文件夹
项目打包放到的dist文件夹，修改就重新打包，清空目标文件夹，再放进去
下载插件gulp-clean以及其他相关插件
const {src,dest, parallel} = require("gulp");
const htmlmin = require("gulp-htmlmin");
const rename = require("gulp-rename");
const cleanCss = require("gulp-clean-css");
const clean = require("gulp-clean");
function handleHtml(cb){
src("./src/index.html").pipe(htmlmin({
collapseWhitespace:true
})).pipe(rename({
suffix:".min"
})).pipe(dest("./dist"))
cb();
}
function handleCss(cb){
src("./src/css/index.css").pipe(cleanCss()).pipe(rename({
suffix:".min"
})).pipe(dest("./dist/css"))//这里创建文件夹
cb();
}
function cleanDir(cb){
src("./dist").pipe(clean())
cb();
}
exports.default = parallel(handleHtml,handleCss);
exports.clean=cleanDir;
先gulp创建打包好的，若是修改后打包，先执行gulp clean再执行gulp
监视任务
const {src,dest, parallel} = require("gulp");
const htmlmin = require("gulp-htmlmin");
const rename = require("gulp-rename");
const cleanCss = require("gulp-clean-css");
const clean = require("gulp-clean");
const sass = require("gulp-sass");
function handleHtml(cb){
src("./src/index.html").pipe(htmlmin({
collapseWhitespace:true
})).pipe(rename({
suffix:".min"
})).pipe(dest("./dist"))
cb();
}
function handleCss(cb){
src("./src/css/index.css").pipe(cleanCss()).pipe(rename({
suffix:".min"
})).pipe(dest("./dist/css"))
cb();
}
function cleanDir(cb){
src("./dist").pipe(clean())
cb();
}
function handleSass(cb){
src("./src/sass/test.scss").pipe(sass()).pipe(dest("./src/css/"))
cb();
}
const {watch} = require("gulp");
function Watch(cb){
//监视sass文件变化，自动进行编译任务
watch("./src/sass/test.scss",handleSass);//第一个参数监视文件，第二个参数变化后执行的任务
cb();
}
exports.default = Watch;//小写改为大写避免了冲突
//exports.handleSass = handleSass;
// exports.default = parallel(handleHtml,handleCss);
// exports.clean=cleanDir;
全自动化构建项目
//自动编译sass
//自动打开浏览器
//自动刷新浏览器
const CleanCSS = require("clean-css");
const{src,dest,watch,series, parallel}=require("gulp");
//记录下载的插件：npm init -y
//自动热加载插件：npm i gulp-connect
//再下载gulp-sass gulp-connect open(自动打开浏览器)
//导入进来
const connect=require("gulp-connect");
const sass = require("gulp-sass");
const open=require("open");
//编译sass
function handleSass(cb){
src("./src/sass/index.scss").pipe(sass()).pipe(dest("./src/css")).pipe(connect.reload());//自动刷新的意思
cb();
}
function server(cb){
connect.server({//创建一个服务器
//配置
root:"./src/",
port:9010,//6666端口不行，被占了
livereload:true//自动刷新
});
//自动打开浏览器
open("http://localhost:9010/index.html");
//监视文件变化，自动编译
watch("./src/sass/index.scss",handleSass);
cb();
}
exports.default = series(handleSass,server);
//series和handler可以互相嵌套
// series(handlerSass,parallel(CleanCss,hadnleJs)
不想说什么了，脑子炸了
插件补充
gulp-load-plugins:打包插件
里面包含了所有的插件
导入：
const $ = require("gulp-load-plugins")();/导入进来的是一个函数，调用后得到所有插件组成的对象
所有connect可以改为 ￥.connect来代替
$.sass
注意事项：能代替的必须是下载好的
压缩插件：
将切好的图片进行压缩，使图片更小，让项目运行起来更快
插件：gulp-imagemin
任务代码：
const imagemin=require("gulp-imagemin");
function compressImage(cb){
src("./image/*.jpg").pipe(imagemin()).pipe(dest("./img"));
cb();
}
注意：不要压缩网上的图片，因为人家已经压缩好才上传的，会压缩个寂寞。自己拍照挥着截图都可以
推荐文章链接：点击此文字进入推荐文章链接
gulp特点
任务化，基于流，简易的API
类似资料：