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