gulp自动化构建工具

目录

gulp是什么?

gulp安装

gulp API

gulp.src(globs[, options])

gulp.dest(path[, options])

gulp.task(name[, deps], fn)

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

gulp API 实战

常用gulp插件

watch API的使用

可能报的错误:


gulp是什么?

1.自动化——gulp是一个工具包,可以帮助您自动化开发工作流中痛苦或耗时的任务。

2.与平台无关——所有主要ide都内置了集成,人们使用gulp和PHP、. net、Node。js、Java和其他平台。

3.强大的生态系统——使用npm模块做任何你想做的事情+超过2000个精心设计的插件流文件转换

4.简单——通过提供一个最小的API接口,gulp易于学习和使用。

gulp安装

1. 安装node

https://www.runoob.com/nodejs/nodejs-install-setup.html

查看安装的版本

node --version

2.全局安装gulp

npm install --save-dev gulp

gulp API

详细请见官方文档

https://www.npmjs.com/package/gulp

https://www.gulpjs.com.cn/docs/api/

  • gulp.src(globs[, options])

输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中

  • gulp.dest(path[, options])

能被 pipe 进来,并且将会写文件。并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它

  • gulp.task(name[, deps], fn)

定义一个使用 Orchestrator 实现的任务(task)。

gulp.task('somename', function() {
  // 做一些事
});

name

任务的名字,如果你需要在命令行中运行你的某些任务,那么,请不要在名字中使用空格。

deps

类型: Array

一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。

  • gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。

gulp API 实战

常用gulp插件

利用gulp插件,压缩gulptestdemo这个小项目

  • 重命名插件:rename
npm install --save-dev gulp-rename
  • 合并文件插件concat
npm install --save-dev gulp-concat
  • 压缩js插件:uglify
npm install --save-dev gulp-uglify
var gulp = require('gulp'),
  uglify = require('gulp-uglify'),
  rename = require('gulp-rename'), //rename
  concat = require('gulp-concat'); //file concat

gulp.task('minifyjs',function(){
  return gulp.src('scripts/*.js')
  .pipe(concat('main.js'))     //合并所有js到main.js
  .pipe(gulp.dest('dist/scripts'))  //输出main.js 到文件夹
  .pipe(rename({suffix:'.min'}))  //rename压缩后的文件名
  .pipe(uglify())              //压缩
  .pipe(gulp.dest('dist/scripts')); //输出
});

css插件 :minify-css

npm install --save-dev gulp-minify-css
var gulp = require('gulp'),
  minifycss = require('gulp-minify-css');

gulp.task('minifycss', function() {
  return gulp.src('styles/*.css') //压缩文件
    .pipe(minifycss()) //执行压缩
    .pipe(gulp.dest('dist/styles')) //输出文件夹
});

 

  • 压缩html插件:minify-html
npm install --save-dev gulp-minify-html

 

var gulp = require('gulp'),
   minifyhtml = require('gulp-minify-html');

gulp.task('minifyhtml',function(){
  return gulp.src('*.html')
  .pipe(minifyhtml())              //压缩
  .pipe(gulp.dest('dist')); //输出
});
  • 压缩图片插件:imagemin (需要先安装imagemin-pngquant插件)
npm install --save-dev gulp-imagemin-pngquant
npm install --save-dev gulp-imagemin
var gulp = require('gulp'),
     imagemin = require('gulp-imagemin');

gulp.task('minifyimage',done => {
    gulp.src('images/*.*')
        .pipe(imagemin({progressive: true}))
        .pipe(gulp.dest('dist/images'));
    done();
});

合并所有任务

gulp 3.0

gulp.task('default',['minifyimage','minifyjs','minifycss','minifyhtml']);

gulp 4.0:新增加了series(顺序执行)和parellel(并行执行)任务执行方法

gulp.task('default',gulp.series('minifyimage','minifyjs','minifycss','minifyhtml'));

执行:

gulp

压缩结果都在dist文件夹:

 

 

watch API的使用

gulp 4.0 watch API 的第二个参数不能是任务数组了,而是直接传入回调函数或者gulp.series('任务名')

//监视css文件,当有更新执行重新压缩css的回调函数
gulp.task('watchcss',() => {
  gulp.watch(['styles/*.css'],() => {
    gulp.src('styles/*.css') //压缩文件
    .pipe(minifycss()) //执行压缩
    .pipe(gulp.dest('dist/styles')) //输出文件夹
  });
});

 

可能报的错误

1.The following tasks did not complete: mytask   Did you forget to signal async completion?

解决方法:

(1)利用async和await

(2)gulp.task 的回调函数,传入done方法,将此方法添加在回调函数最后。告知gulp这个stream结束

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值