gulp（接在SASS之后）

我不是女神ヾ 2022-12-16 09:20 158阅读 0赞

# 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以及其他相关插件

先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();
    }

注意：不要压缩网上的图片，因为人家已经压缩好才上传的，会压缩个寂寞。自己拍照挥着截图都可以

推荐文章链接：[点击此文字进入推荐文章链接][Link 1]

gulp特点

> 任务化，基于流，简易的API

[Link 1]: https://www.cnblogs.com/caominjie/p/11007904.html