gulp 入门

gulp是什么?

gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效

gulp能做什么

  1. 开发环境下,想要能够按模块组织代码,监听实时变化
  2. css/js预编译,postcss等方案,浏览器前缀自动补全等
  3. 条件输出不同的网页,比如app页面和mobile页面
  4. 线上环境下,我想要合并、压缩 html/css/javascritp/图片,减少网络请求,同时降低网络负担
  5. 等等...

安装gulp

npm install -g gulp     //全局安装
npm install --save-dev gulp //安装到当前项目并在package.json中添加依赖

核心API介绍

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

task()方法用于定义任务,传入名字、依赖任务数组、函数即可,gulp会先执行任务数组,结束后调用定义的函数,可以通过此手段控制任务的执行顺利。

例子:要定义一个任务build来执行css、js、imgs这三个任务,我们可以通过指定一个任务数组而不是函数来完成。

gulp.task('build', ['css', 'js', 'imgs']);

gulp.src src(globs[, options])

src()方法输入一个glob或者glob数组,然后返回一个可以传递给插件的数据流

Gulp使用node-glob来从你指定的glob里面获取文件:

  • app.js 精确匹配
  • *.js 能匹配js后缀的文件
  • **/*.js 能匹配多级目录下的js文件(也包含当前目录下)
  • !js/app.js 精确排除

例子:js目录下包含了压缩和未压缩的js文件,我们想要压缩还没有被压缩的文件

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

gulp.dest dest(path[, options])

dest()方法用来写文件,第一个参数表示最终输出的目录名。注意,它无法允许我们指明最终输出的文件名,只能指定输出文件夹名,而且在文件夹不存在的情况下会自动创建。

例子:把开发目录src下的js文件输出到部署目录dist下

gulp.src('src/**/*.js')
  .pipe(gulp.dest('dist'))

gulp.watch watch(globs[, opts], cb) or watch(globs[, opts], tasks)

watch()方法可以监听文件,它接受一个glob或者glob数组以及一个任务数组来执行回调
// 当templates目录下的模板文件发生变化,自动执行编译任务

gulp.task('watch', function (event) {
  gulp.watch('templates/*.tmpl.html', ['artTemplate']);
  console.log('Event type: ' + event.type); // added, changed, or deleted   
  console.log('Event path: ' + event.path); // The path of the modified file
});

Gulp.watch()的另一个非常好的特性是返回watcher对象

  • watcher对象可以监听很多事件:
    • change 文件变化时触发
    • end 在watcher结束时触发
    • error 在出现error时触发
    • ready 在文件被找到并正被监听时触发
    • nomatch 在glob没有匹配到任何文件时触发
  • Watcher对象也包含了一些可以调用的方法:
    • watcher.end() 停止watcher
    • watcher.files() 返回watcher监听的文件列表
    • watcher.add(glob) 将与指定glob相匹配的文件添加到watcher(也接受可选的回调当第二个参数)
    • watcher.remove(filepath) 从watcher中移除个别文件

配置文件 gulpfile.js

gulp流程图

任务会让所有的文件匹配js/*.js,并且执行JSHint,然后打印输出结果,取消文件缩进,最后把他们合并起来,保存为build/app.js,整个过程如下图所示:

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

推荐阅读更多精彩内容

  • gulp是什么? gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效 gulp能做什么 1.开发环...
    小雨雪smile阅读 235评论 0 1
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 747评论 0 8
  • 入门指南 1. 全局安装 gulp: 如果你之前有全局安装过一个版本的 gulp,请执行一下 npm rm --g...
    Top_Chenxi阅读 412评论 0 0
  • 编辑于2015年 转载自某作者的译文 作者要是看到请联系我注明出处 对网站资源进行优化,并使用不同浏览器测试并不是...
    krock01阅读 238评论 0 2
  • 天使A猫是深圳市天使互助网络有限公司全额投资运营的合伙电商平台,全球首创“全民合伙玩电商,百亿礼金大派送!”网站以...
    5e104a4f8cdb阅读 108评论 0 0