gulp-基于流的自动化构建工具--入门

2017-07-10 本文已影响0人風隨風去

gulp安装

全局安装 gulp：

$ npm install --global gulp

作为项目的开发依赖（devDependencies）安装：

$ npm install gulp --save-dev

在项目根目录下创建一个名为 gulpfile.js 的文件并导入组件：

var gulp = require('gulp'),//导入gulp modul
      minifycss = require('gulp-minify-css'),//css压缩组件
      concat = require('gulp-concat'),//组合组件
      uglify = require('gulp-uglify'),//js压缩组件
      rename = require('gulp-rename')//重命名组件
      jshint=require('gulp-jshint')   //js检查组件
     notify=require('gulp-notify');   //提示组件
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。

gulp.src

gulp.src(globs[, options])
输出符合提供的匹配模式或者匹配模式的数组的文件（.html,[ .js, .css ,.json, .jade ]）,返回一个文件流，它可以被输（pipe）送到其他插件中

gulp.src('client/templates/*.jade')
  .pipe(jade())//jade是源于nodejs的html模板引擎
  .pipe(minify())//压缩
  .pipe(gulp.dest('build/minified_templates'));//输出到名为build下minified_templates的文件夹

globs
类型： String 或 Array
要操作的文件的路径或包含文件路径的数组
options
类型：object
通过 glob-stream 所传递给 node-glob 的参数。gulp还增加了一些额外的选项参数：
- options.buffer
  类型： Boolean
  默认值： true
  如果该项被设置为 false，那么将会以流( stream) 方式返回 file.contents,而不是文件缓冲( buffer) 的形式,这在处理一些大文件的时候将会很有用。注意：插件可能并不会实现对 stream 的支持。
options.read
类型： Boolean
默认值： true
如果该项被设置为 false，那么 file.contents会返回空值（null），也就是并不会去读取文件。
options.base
类型： String
默认值：将会加在 glob 之前 (请看 glob2base)
在一个路径为 client/js/somedir的目录中，有一个文件叫 somefile.js

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
         .pipe(minify()) 
         .pipe(gulp.dest('build')); // 写入 'build/somedir/somefile.js'
gulp.src('client/js/**/*.js', { base: 'client' }) 
         .pipe(minify()) 
         .pipe(gulp.dest('build')); // 写入 'build/js/somedir/somefile.js'

gulp.dest

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

gulp.src('./client/templates/*.jade')
      .pipe(jade())
      .pipe(gulp.dest('./build/templates'))
      .pipe(minify())
      .pipe(gulp.dest('./build/minified_templates'));

文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的，相对路径也可以根据所给的 base 来计算。

path
类型： String or Function
文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例来提供。
options
类型： Object
- options.cwd
  类型： String 默认值： process.cwd()
  输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。
- options.mode
  类型： String 默认值： 0777
  八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

gulp.task

gulp.task(name[, deps], fn)
定义一个使用 Orchestrator 实现的任务（task）。

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

name
任务的名字，如果需要在命令行中运行某些任务，那么，在名字中就不要使用空格。
deps
类型： Array
一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

注意：为了任务不在这些前置依赖的任务完成之前运行，请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个回调函数callback，或者返回一个 promise 或 stream。

fn
该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。
任务异步执行
如果fn接受了一个 callback、返回一个 stream、返回一个 promise，任务就可以异步执行。

// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});

gulp.task('somename', function() {
     var stream = gulp.src('client/**/*.js')
         .pipe(minify())
         .pipe(gulp.dest('build'));
         return stream;
});

var Q = require('q');
gulp.task('somename', function() {
     var deferred = Q.defer();
     // 执行异步的操作
     setTimeout(function() {
        deferred.resolve();
      }, 1);
      return deferred.promise;
});

注意：默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，你需要做两件事：

给出一个提示，来告知 task 什么时候执行完毕，
并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。

gulp-基于流的自动化构建工具--入门

gulp安装

gulp.src

gulp.dest

gulp.task

猜你喜欢

热点阅读