gulp的使用

孟璞

2023-12-01

typora-root-url: images
typora-copy-images-to: images

第一节：

wabpack

工作应用

最近做项目，因为每次做完后都要手动压缩CSS、JS 等文件，压缩后另存为 *.min.xxx。 Less 还要手动输入命令进行编译，调整页面也经常要手动刷新页面看效果，很麻烦，就尝试用 gulp 去处理这些文件，让事情变得更加简单可靠。

自动化编程

介绍

什么是gulp

Gulp是基于node的一个自动化构建工具，开发者可以使用它构建自动化工作流程,页自动刷新，CSS预处理，代码检测，图片压缩等功能，只需要简单的命令行就可以全部完成。使用它，可以简化工作，让你把重点放在功能的开发上，同时减少人为失误，提高开发的效率和质量。

node中的第三方包,通过npm下载

npm 源

临时配置淘宝源

npm config set registry https://registry.npm.taobao.org

查看

npm config get registry

注意:cmd命令框以管理员身份打开…

gulp的常用功能

搭建web服务
文件保存时自动重载浏览器
优化资源，比如压缩CSS、JavaScript、压缩图片

node及npm的回顾

node -v

npm install 软件 --save-dev npm uninstall 软件

手册位置

https://www.gulpjs.com.cn/docs/getting-started/

插件官网   <http://gulpjs.com/plugins/>

gulp的安装

a 新建工作目录

D:\phpStudy\PHPTutorial\WWW\day32

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iHXaM8Hh-1663214292104)(/1597741520619.png)]

c 安装gulp命令

初始化

npm init -y 生成package.json文件

安装gulp全局命令

npm install gulp --save-dev -g

安装gulp包

npm install gulp --save-dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0h8LGLeN-1663214292105)(/1597742615454.png)]

安装完毕之后查看package.json文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-793Zryni-1663214292106)(/1571793823414.png)]

安装指定版本的gulp

 npm install --save-dev gulp@3.9.1
 注意:如果安装3.x的版本,node要安装v10以下的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkvIfUo4-1663214292107)(/1657001662561.png)]

gulp的工作方式及常用api

常用api

名称	作用
gulp.task(name[, deps], fn)	name为任务名称 deps:任务依赖模块 fn 回调函数
gulp.src()	被处理的文件地址
gulp.pipe()	管道流，接通源头文件与目标文件的输出
gulp.dest()	输出文件的目的地,如果某文件夹不存在，将会自动创建它
4.0之前写法
gulp.watch([globs],[tasks]); //glob为要监视的文件匹配模式，规则和用法与gulp.src方法中的glob相同

tasks为文件变化后要执行的任务，为一个数组 |

4.0之后的写法
gulp.watch(file,function(){
需要完成的任务
}); | 这种写法也只能监听一次,不建议使用

使用流程

1 通过gulp.src()方法获取到想要处理的文件流 

2 把文件流通过pipe方法导入到gulp的插件中

3 把经过插件处理后的流在通过pipe方法导入到gulp.dest()中

4  gulp.dest()方法则把流中的内容写入到文件中

准备: 新建gulpfile.js文件引入gulp文件，注意·名字一定是gulpfile.js

let gulp = require('gulp');

例1:定义简单的hello任务,输出内容

gulp.task('hello',function () {     //定义一个hello任务
    console.log('hello')
});

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CdD74NvR-1663214292108)(/1571794493949.png)]

例2:复制多个后缀名的图片到指定目录

//图片复制的任务
gulp.task('copyImg',function(){
     // src() 获取需要操作的文件资源
     // pipe() 输出获取到的文件流
     //dest()保存文件资源
     return gulp.src('./images/*.{jpg,png}').pipe(gulp.dest('./js/images'));
});

例3:复制login.html到当前js目录中

gulp.task('copyHtml',function () {
    return gulp.src('./login.html').pipe(gulp.dest("./js"))
});

例4:gulp的默认任务

gulp.task('default', function () {
  console.log('要嫁就嫁给幸福,要输就输给追求')
});

查看gulp是否安装成功

gulp -v

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NM2GPZno-1663214292109)(/1597801963711.png)]

gulp插件安装

插件安装格式

npm install XX --save-dev 安装插件到当前的项目dev
在gulpfile.js顶部引入此插件
在创建任务的时候使用此插件

压缩js文件

插件gulp-uglify

a 安装插件

npm install gulp-uglify --save-dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lHbtgkcd-1663214292109)(/1562748529867.png)]

b 编写gulp任务,压缩transport.js文件

var uglify = require('gulp-uglify');
gulp.task('uglify',function(){
    gulp.src('../transport.js').pipe(uglify()).pipe(gulp.dest('./js'));
})

c 对比压缩之后的文件大小.

合并

将多个js文件合并为一个js文件

a 安装插件

npm install gulp-concat --save-dev

b 编写gulp任务,将多个js文件进行合并

var concat = require('gulp-concat');
 // concat()中要指定合并之后的js文件名字
gulp.task('comeOn',function(){
    gulp.src('./testJs/*.js').pipe(concat('all.js')).pipe(gulp.dest('./js'));
})

多任务处理

/******多任务的执行*******/
gulp.task('task1', function (done) {
  console.log('task1');
  done()
})
gulp.task('task2', function (done) {
  console.log('task2')
  done();

})
gulp.task('task3', function () {
  console.log('task3')

})
  // 按照依赖的先后执行任务
gulp.task('default', gulp.series(['task1', 'task2']))
按照任务并行顺序执行
gulp.task('default', gulp.parallel(['task1', 'task2']))

总结

gulp 是node中的第三方模块

gulp.task(任务名,回调函数)
gulp.src(文件路径) 设置文件的路径
gulp.pipe() 管道方法  将文件流输出到指定的方法中
gulp.dest(路径) 保存处理完成的文件

第三节：插件的使用

插件: gulp-connect

插件的安装

npm install gulp-connect --save-dev

创建本地服务器

服务器的代码如下

gulp.task('server',function(){
      connect.server({
        root:'html',//服务器的根目录
        port:8080, //服务器的地址，没有此配置项默认也是 8080
        livereload:true//启用实时刷新的功能
    });
});

gulp-watch插件

监听指定的文件,如果发生变化就自动进行执行相应的操作

安装: npm install gulp-watch --save-dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r9aR9CEu-1663214292110)(/1562763214253.png)]

检测html下所有.html,改变则触发函数

4.0之前的写法

var watch = require('gulp-watch');
gulp.task('plugin',function(){
    watch('./html/*.html',['task_sass'])
});
// [] 直接规定任务

4.0之后的写法(gulp.series(任务1,任务2))

gulp.task('watch_scss', function () {
     watch('./html/*.html', gulp.series('task_html'));
 });

多个任务合并

// 执行多个任务
// gulp.task('任务名称',[任务依赖的模块],回调函数)
// 依赖任务之间没有顺序之分，异步执行
// 依赖任务之间完成后，在执行当前的回调函数
gulp.task('build', gulp.parallel('copyAllHtml','copyNoJs','copyImage'),function () {
    console.log('编译成功')
});

工作应用

connect.reload() 通知浏览器刷新

监听html下的所有.html文件,如果发生了变化则通知浏览器实时刷新,显示内容

定义html任务

var connect = require('gulp-connect');
gulp.task('html',function(done){
     gulp.src('./html/*.html') //制定被刷新的html路径
     .pipe(connect.reload()); // 通知浏览器刷新
        done();
});

定义server任务,即服务器

let connect = require('gulp-connect');
gulp.task('server', function (done) {
  connect.server({
    // 设置根目录
    root: 'html',
    port: 8080,
    livereload: true
  });
  done();
})

定义监听任务

var watch = require('gulp-watch');
gulp.task('watch', function (done) {
  watch('./html/*.html', gulp.parallel(['html']));
  done();
});

合并所有的任务

gulp.task('more', gulp.series(['server', 'watch']))

最后！gulp启动监听

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E5Q8skJk-1663214292111)(/1592376495782.png)]

打开:浏览器访问localhost:8080

其它插件

重命名js文件：          gulp-rename
gulp.task('default',function(){
   gulp.src(['app/js/*.js']).pipe(rename('app.min.js')).pipe(gulp.dest('dist/js'))
})

优化图像大小：          gulp-imagemin

gulp.task('default',function(){
   gulp.src('app/images/*.{jpg,png,JPG,PNG}').pipe(imagemin()).pipe(gulp.dest('dist/images'))
})

压缩css文件：           gulp-minify-css

gulp.task('default',function(){
   gulp.src'app/css/*.css').pipe(minifyCss()).pipe(gulp.dest('dist/css'))
})

gulp4的新任务方式

直接使用

function build(done){
    console.log("cccc");
    done();
}
exports.build=build;
// 相当于下面的代码
// gulp.task("build",function(done){
//     console.log("cccc");
//     done();
// })
// ——————————————————————————————-

多个任务的执行

const gulp = require('gulp');
const { series } = require("gulp");

function loadjs(done){
    console.log("aaa");
    done();
}
function loadCss(done){
    console.log("bbbb");
    done();
}
exports.default=series(loadjs,loadCss);


// 和下面的代码概念一样
  gulp.task("loadjs",function(done){
      console.log("aaa");
       done();
  })
    gulp.task("loadCss",function(done){
      console.log("bbbb");
       done();
  })
    gulp.task("default",gulp.series(["loadjs","loadCss"]));

默认的任务

   // 执行gulp执行的默认任务
    exports.default=function(){

    }

Gulp官方插件网站找寻插件（gulp-sass-china）

gulp-sourcemaps插件作用(扩展)

gulp的报错

当我们在安装以一些依赖的时候会提示以下报错---------

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J0QuY5eH-1663214292112)(/1562727145308.png)]

问题在于

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJbu5e5V-1663214292112)(/1562727226414.png)]

这个name 不能使用所需要安装包的名字！

解决方案----- 修改下就行 – -我将wenpack 改成webpack1 就解决了这个问题----

gulp: Did you forget to signal async completion

版本升级之后,这么写就报错

学习gulp的前端自动化构建，按照示例代码，跑了一个简单的task，控制台打出如下提示： 
The following tasks did not complete: testGulp 
Did you forget to signal async completion?

查阅Stack Overflow，在这里提供一种简单的改法。

问题重现
原代码：
const gulp = require('gulp');
gulp.task('testGulp', () => {
    console.log('Hello World!');
});

控制台报错：

The following tasks did not complete: testGulp 
Did you forget to signal async completion?

代码提示我们，是不是忘了写异步完成的标记？

这个提示常常是在执行多个任务产生的

任务前加上 return返回值

gulp的task任务要加上返回值，如果是单任务，没有return其实也是可以执行的，不会报错。

解决方法，使用 async 和 await。

const gulp = require('gulp');
gulp.task('testGulp', async() => {
   await console.log('Hello World!');
});

控制台输出正常

附官方方法

在不使用文件流的情况下，向task的函数里传入一个名叫done的回调函数，以结束task，如下代码所示：

gulp.task('testGulp', done => {
  console.log('Hello World!');
  done();
});

done回调函数的作用是在task完成时通知Gulp（而不是返回一个流），而task里的所有其他功能都纯粹依赖Node来实现。

gulp-sass的错误

gyp ERR! build error window下缺少编译环境

npm install -g node-gyp

如果还报错就执行

npm install --global --production windows-build-tool

扩展

gulp-babel插件

现象

各大浏览器厂商对es2015功能支持不完全,等到全部支持会等很长时间,如果现在使用es2015,可以选择babel一个将ES6/ES7写的代码转换为ES5代码的编译器.我们选择使用gulp自动化编译生成es5代码.

插件安装

a 使用npm安装babel相关插件

npm install --save-dev gulp-babel@7 (使用8版本报错)
npm install --save-dev babel-core 
  babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js
npm install --save-dev babel-preset-env
(可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5)
npm install --save-dev babel-preset-es2015
(用于将部分ES6 语法转换为ES5 语法  箭头函数  class语法 const和let)

b index.js用ES6的语法写

function A(){
 let name='张三';
  const age=18;
  let [a,b,c] = [1,2,3];
}

编译之后的结果
'use strict';
function A() {
  var name = '张三';
  var age = 18;
  var a = 1,
      b = 2,
      c = 3;
}

c 编写glupFile.js的代码

const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('minjs', () => { 
        return gulp.src('./*.js') .pipe(
            babel({ presets: ['es2015'] })) 
            .pipe(gulp.dest('./dest'));
         });

脚下留心:

注意 Cannot find module '@babel/core,是npm发布的gulp-babel版本问题

 首先查看自身的package.json文件发现当前babel版本为8，而我们的插件使用版本为7

babel-core的6.X版本需要babel7.X的配合

gulp搭建工作服务器

var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
var server=require("browser-sync").create();

function renderCss(){
    gulp.src("./src/scss/*.scss")
    .pipe(plugins.sass())
    .pipe(plugins.concat("main.css"))
    .pipe(plugins.minifyCss())
    .pipe(plugins.rename("main.min.css"))
    .pipe(gulp.dest("./dist/css/"))
    .on("end",server.reload);
}

function renderHtml(){
    gulp.src("./*.html")
    .pipe(gulp.dest("./"))
    .on("end",server.reload);
}

function renderJs(){
    gulp.src("./src/js/*.js")
    .pipe(plugins.concat("main.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("main.min.js"))
    .pipe(gulp.dest("./dist/js/"))
    .on("end",server.reload);
}

gulp.task("default",function(){
    renderCss();
    renderJs();
    renderHtml();
    server.init({
        server:"./",
        port:4010
    });
    gulp.watch("./src/scss/*.scss",renderCss)
    gulp.watch("./*.html",renderHtml)
    gulp.watch("./src/js/*.js",renderJs)
})

in.css"))
.pipe(gulp.dest(“./dist/css/”))
.on(“end”,server.reload);
}

function renderHtml(){
gulp.src(“./*.html”)
.pipe(gulp.dest(“./”))
.on(“end”,server.reload);
}

function renderJs(){
gulp.src(“./src/js/*.js”)
.pipe(plugins.concat(“main.js”))
.pipe(plugins.uglify())
.pipe(plugins.rename(“main.min.js”))
.pipe(gulp.dest(“./dist/js/”))
.on(“end”,server.reload);
}

gulp.task(“default”,function(){
renderCss();
renderJs();
renderHtml();
server.init({
server:“./”,
port:4010
});
gulp.watch(“./src/scss/.scss",renderCss)
gulp.watch("./.html”,renderHtml)
gulp.watch(“./src/js/*.js”,renderJs)
})

gulp的使用

typora-root-url: images
typora-copy-images-to: images

第一节：

介绍

什么是gulp

npm 源

gulp的常用功能

node及npm的回顾

手册位置

gulp的安装

gulp的工作方式及常用api

gulp插件安装

插件安装格式

压缩js文件

合并

多任务处理

总结

第三节：插件的使用

创建本地服务器

gulp-watch插件

多个任务合并

工作应用

其它插件

gulp4的新任务方式

Gulp官方插件网站找寻插件（gulp-sass-china）

gulp-sourcemaps插件作用(扩展)

gulp的报错

gulp: Did you forget to signal async completion

gulp-sass的错误

扩展

gulp-babel插件

相关阅读

相关文章

相关问答

相关文档

gulp的使用

typora-root-url: images typora-copy-images-to: images

第一节：

介绍

什么是gulp

npm 源

gulp的常用功能

node及npm的回顾

手册位置

gulp的安装

gulp的工作方式及常用api

gulp插件安装

插件安装格式

压缩js文件

合并

多任务处理

总结

第三节：插件的使用

创建本地服务器

gulp-watch插件

多个任务合并

工作应用

其它插件

gulp4的新任务方式

Gulp官方插件网站找寻插件（gulp-sass-china）

gulp-sourcemaps插件作用(扩展)

gulp的报错

gulp: Did you forget to signal async completion

gulp-sass的错误

扩展

gulp-babel插件

相关阅读

相关文章

相关问答

相关文档

typora-root-url: images
typora-copy-images-to: images