设为首页 加入收藏

TOP

构建工具Gulp(一)
2017-10-13 10:50:09 】 浏览:8649
Tags:构建 工具 Gulp

前面的话

  与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作。gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效

 

入门

  如果会使用grunt,则gulp学起来,并不困难。主要包括以下几步

  1. 全局安装 gulp

$ npm install --global gulp

  2. 作为项目的开发依赖(devDependencies)安装

$ npm install --save-dev gulp

  3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

  4. 运行 gulp:

$ gulp

  默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。

  想要单独执行特定的任务(task),请输入 gulp <task> <othertask>

 

API

  在学习gulp的配置之前,首先需要了解gulp涉及到的API

【gulp.src(globs[, options])】

  指定需要处理的源文件的路径,返回当前文件流至可用插件,参数如下

  globs: 需要处理的源文件匹配符路径。类型(必填):String or StringArray;

  通配符路径匹配示例:

“src/a.js”:指定具体文件;
“*”:匹配所有文件 例:src/*.js(包含src下的所有js文件);
“**”:匹配0个或多个子文件夹 例:src/**/*.js(包含src的0个或多个子文件夹下的js文件);
“{}”:匹配多个属性 例:src/{a,b}.js(包含a.js和b.js文件)src/*.{jpg,png,gif}(src中所有jpg/png/gif文件)
“!”:排除文件 例:!src/a.js(不包含src下的a.js文件);
var gulp = require('gulp'),
    less = require('gulp-less');
 
gulp.task('testLess', function () {
    //gulp.src('less/test/style.less')
    gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

  options: 类型(可选):Object,有3个属性buffer、read、base;

options.buffer:类型:Boolean 默认true,设为false将返回file.content的流且不缓冲文件,处理大文件时有用
options.read: 类型:Boolean 默认:true 设置false,将不执行读取文件操作,返回null;
options.base: 类型:String 设置输出路径以某个路径的某个组成部分为基础向后拼接
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(path[, options])】

  指定处理完后文件输出的路径。可以将它pipe到多个文件夹。如果某文件夹不存在,将会自动创建它

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

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

  该方法的参数如下

path:  类型(必填):String or Function 指定文件输出路径,或者定义函数返回文件输出路径亦可
options:  类型(可选):Object,有2个属性cwd、mode;
    options.cwd:类型:String 默认:process.cwd():前脚本的工作目录路径 文件输出路径为相对路径会用到
    options.mode:类型:String 默认:0777 指定被创建文件夹的权限

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

  定义一个gulp任务,参数如下

name:  类型(必填):String 指定任务的名称(不应该有空格);
deps:  类型(可选):StringArray,该任务依赖的任务列表
fn:    类型(必填):Function 该任务调用的插件操作

  默认的,task 将以最大的并发数执行,也就是说,gulp会一次性运行所有的task并且不做任何等待。如果想要创建一个序列化的task队列,并以特定的顺序执行,需要做两件事:1、给出一个提示,来告知 task 什么时候执行完毕;2、并且再给出一个提示,来告知一个 task 依赖另一个 task 的完成。

  对于这个例子,先假定有两个 task,"one" 和 "two",并且希望它们按照这个顺序执行:

  在 "one" 中,加入一个提示,来告知什么时候它会完成:可以再完成时候返回一个callback,或者返回一个promise或stream,这样系统会去等待它完成。

  在 "two" 中,需要添加一个提示来告诉系统它需要依赖第一个 task 完成

var gulp = require('gulp');
// 返回一个 callback,因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined,则会停止执行,且注意,这样代表执行失败了
});
// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});
gulp.task('default', ['one', 'two']);

【return】

  把task

首页 上一页 1 2 3 4 5 6 7 下一页 尾页 1/7/7
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JavaScript 特效三大系列总结 下一篇webpack分离第三方库(CommonsChun..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目