gulp简单实用

发表于 | 分类于
| 字数统计: 1.8k 字

gulp是基于node实现Web前端自动化开发的工具，利用它能够极大的提高开发效率。 在Web前端开发工作中有很多’重复工作’，比如压缩CSS/JS文件。编写 gulp配置代码,让gulp自动执行这些’重复工作’。gulp主要是基于任务流(stream)的自动化构建工具

安装

  • npm install gulp -g
  • 使用gulp -v 查看安装好的全局gulp版本
  • npm init -y 创建package.json文件
  • 新建gulp配置文件gulpfile.js(固定写法)
  • 要运行gulp任务,只要在命令行切换到当前目录执行gulp命令即可,默认会执行任务名为default的任务

gulp使用流程

首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中, 文件流可以继续使用,执行后续操作

gulp的常用API

  • gulp.task() 用来定义任务

    1
    2
    3
    4
    5
    6
    7
    8
    /* 语法 gulp.task(name[, deps], fn)
    name 为任务名
    deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
    fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
    */
    gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务
      // Do something
    });

  • gulp.src() 用来获取虚拟文件流的

    1
    2
    3
    4
    5
    6
    7
    8
    /* gulp.src(globs[, options])
    globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
    options为可选参数。通常情况下我们不需要用到。
    */
    //使用数组的方式来匹配多种文件
    gulp.src(['js/*.js','!bob*.js','css/*.css','*.html'])
    //匹配所有js文件，但排除掉以b开头的js文件
    gulp.src([*.js,'!b*.js'])

  • gulp.dest() 方法是用来写文件的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* gulp.dest(path[,options])
    path为写入文件的路径 用来指定要生成的文件的目录，而不能指定生成文件的文件名 修改名称可以用gulp-rename
    options为一个可选的参数对象，通常我们不需要用到
    */
    var gulp = reruire('gulp');
    gulp.src('script/jquery.js').pipe(gulp.dest('dist/foo.js'));
    //最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js
    //有通配符开始出现的那部分路径为 **/*.js
    gulp.src('script/**/*.js').pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js
    //如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js

  • gulp.watch() 用来监视文件的变化，当文件发生变化后，可以用它来执行相应的任务，例如scss编译等

    1
    2
    3
    4
    5
    6
    7
    /* gulp.watch(glob[, opts], tasks)
    glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
    opts 为一个可选的配置对象，通常不需要用到
    tasks 为文件变化后要执行的任务，为一个数组
    */
    gulp.task('sass',function(){})
    gulp.watch('v2.0/src/sass/*.scss', ['sass'])

常用gulp插件

  • gulp-rename 重命名 npm install --save-dev gulp-rename
  • gulp-uglify js文件压缩 npm install --save-dev gulp-uglify
  • gulp-minify-css css文件压缩 npm install --save-dev gulp-minify-css
  • gulp-minify-html html文件压缩 npm install --save-dev gulp-minify-html
  • gulp-concat 文件合并 npm install --save-dev gulp-concat
  • gulp-less less和sass的编译 npm install --save-dev gulp-less
  • gulp-sass less和sass的编译 npm install --save-dev gulp-sass
  • gulp-imagemin 图片压缩 npm install --save-dev gulp-imagemin
  • gulp-zip 将文件压缩成zip npm install --save-dev gulp-zip
  • gulp-sftp 将文件上传至ftp npm install --save-dev gulp-sftp
  • browser-sync 自动刷新 npm install --save-dev browser-sync
  • gulp-autoprefixer 为css文件添加浏览器前缀 npm install gulp-clean-css --save-dev
  • gulp-if 条件判断及环境变量设置 npm install gulp-if —save-dev
  • gulp-babel gulp中配置babel编译es6 需安装babel相关插件并配置.babelrc文件 还需要在项目中引入babel-polyfill编译es6新增api npm install gulp-babel —save-dev

  • gulp-load-plugins 自动加载插件 npm install -D gulp-load-plugins

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 能自动帮你加载package.json文件里的gulp插件 无需将每一个插件都require进来 但前提是插件要以gulp-开头 已经安装过这些插件 */
    /* package.json 中的gulp插件
    "devDependencies": {
      "gulp": "~3.6.0",
      "gulp-rename": "~1.2.0",
      "gulp-concat": "~0.4.3",
      "gulp-load-plugins": "~0.5.1"
    }
    */
    var gulp = require('gulp');
    //加载gulp-load-plugins插件，并马上运行它
    var plugins = require('gulp-load-plugins')();
    gulp.task('rename', function () {
      gulp.src('js/jquery.js').pipe(plugins.rename())  //压缩
    }

  • 添加error事件监听

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var babel = require("gulp-babel");
     gulp.task("babel", function () {
      return gulp.src(srcJs)
        .pipe(babel()) 
        .on('error',function(err){
          console.log(err)
        })
        .pipe(gulp.dest(distJs))
    })

  • 由于Gulp 4并不向后兼容Gulp 3使用最新版时, 需要修改gulpfile.js
    参考链接: Gulp 4 入门指南 相对完整的Gulp4升级指南 gulp最新文档

gulpfile.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
var gulp   = require('gulp'),
  concat   = require('gulp-concat'),//多个文件合并为一个
  cleanCss = require('gulp-clean-css'),// 压缩css为一行
  ugLify   = require('gulp-uglify'),//压缩js
  imageMin = require('gulp-imagemin'),//压缩图片
  pngquant = require('imagemin-pngquant'),//深度压缩
  htmlMin  = require('gulp-htmlmin'),//压缩html
  changed  = require('gulp-changed'),//检查改变状态
  less     = require('gulp-less'),//压缩合并less
  del      = require('del'),
  browserSync = require('browser-sync').create();//浏览器实时刷新
//删除dist下的所有文件
gulp.task('delete',function(cb){
  return del(['dist/*','!dist/images'],cb)
})
//压缩html
gulp.task('html',function(){
  var options = {
    removeComments:true,//清除HTML注释
    collapseWhitespace:true,//压缩HTML
    removeScriptTypeAttributes:true,//删除script的type='text/script'
    removeStyleLinkTypeAttributes:true,//删除style和link的type='text/css'
    minifyJS:true,//压缩页面JS
    minifyCSS:true//压缩页面CSS
  };
  gulp.src('src/index.html')
    .pipe(changed('dist',{hasChanged:changed.compareSha1Digest}))
    .pipe(htmlMin(options))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({stream:true}))
})

//实时编译less
gulp.task('less',function(){
  gulp.src(['./src/less/*.less']) //多个文件以数组形式传入
    .pipe(changed('dist/css',{hasChanged:changed.compareSha1Digest}))
    .pipe(less()) //调用less模块编译less
    .pipe(concat('main.css')) //合并之后生成main.css
    .pipe(gulp.dest('dist/css')) //输出到指定目录下
    .pipe(browserSync.reload({stream:true}));
})

//压缩js
gulp.task('script',function(){
  gulp.src(['src/js/api.js','src/js/index.js'])
    .pipe(changed('dist/css',{hasChanged:changed.compareSha1Digest}))
    .pipe(concat('index.js'))
    .pipe(ugLify())
    .pipe(gulp.dest('dist/js'))
    .pipe(browserSync.reload({stream:true}))
})

//压缩图片
gulp.task('image',function(){
  gulp.src('./src/images/*.*')
    .pipe(imageMin({
      progressive:true,//无损压缩JPG图片
      svgoPlugins:[{removeViewBox:false}],//不移除svg的viewbox属性
      use:[pngquant()] //使用pngquant插件进行深度压缩
    }))
})

// 将文件压缩成zip
gulp.task('zip', function () {
  return gulp.src('【build】/**/*', {
    base: '【build】'
  })
  .pipe(zip(dateFormat(now, 'yyyymmddHHMM') + folderName + '.zip'))
  .pipe(gulp.dest('【build】'))
})

//上传项目文件到ftp
gulp.task('up', function () {
  return gulp.src('【build】/*' + folderName + '.zip', {
    base: '【build】'
  })
  .pipe(sftp({
    host: 'xx',
    user: 'xx',
    pass: 'xx',
    remotePath: 'xx',
    timeout: 100000
  }))
})

//启动热更新
gulp.task('serve',['delete'],function(){
  gulp.start('script','less','html');
  browserSync.init({
    port:2017,
    server:{
      baseDir:['dist']
    }
  });
  gulp.watch('src/js/*.js',['script']);  //监控文件变化 自动更新
  gulp.watch('src/less/*.less',['less']);
  gulp.watch('src/*.html',['html']);
  gulp.watch('src/images/*.*',['images']);
})

//执行任务
gulp.task('default',['serve']);

参考链接

前端构建工具gulpjs的使用介绍及技巧
gulp.js 中文网
gulp构建项目系列教程

-------------本文结束感谢您的阅读-------------
0%