gulp使用实践

以前,在自己的工程中用过 grunt ,和他的一些插件比如 autoprefixer 、 jshint 等等。 也在 学习过webpack的使用。而现在所

以前,在自己的工程中用过 grunt ,和他的一些插件比如 autoprefixerjshint 等等。

也在 学习过webpack的使用。而现在所处项目组用的是gulp来构建前端工作流,故此学习整理。

基本用法

首先理解一遍 中文api 。对新事物的学习,就直接有效的方法就是将官网全部浏览一遍。

gulp.src(globs[,options])

输出文件流或文件,可以pipe到别的插件中去。

gulp.src('client/templates/*.jade')

.pipe(jade())

.pipe(minify())

.pipe(gulp.dest('build/minified_templates'));

globs

string或array类型,要读取的glob或包含globs的数组。

options

object类型,有以下参数:

options.buffer

boolean类型,默认为true,为false时会以steam形式而不是buffer形式返回结果。

options.read

boolean类型,默认为true,为false时,会返回空,也即是不去读取文件。

options.base

string类型,默认值为glob之前。看demo:

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'

glup.dest(path[,options])

写操作,如果文件不存在,则创建之。

gulp.src('./client/templates/*.jade')

.pipe(jade())

.pipe(gulp.dest('./build/templates'))

.pipe(minify())

.pipe(gulp.dest('./build/minified_templates'));

相对路径是根据base来计算的。

path

string或者function类型,文件被写入的路径,也可以是一个函数,在函数中返回路径即可。

options

object类型

options.cwd

string类型,默认值为process.cwd(),输出目录的cwd参数,只在所给的输出目录是相对路径时候有效。

options.mode

string类型,默认值为0777,八进制权限字符,用以定义所有在输出目录中所创建的目录的权限。

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

定义一个任务

gulp.task('somename',function(){

// 做一些事

});

name

任务名称

deps

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

gulp.task('mytask', ['array','of','task','names'],function(){

// 做一些事

});

fn

该函数定义任务所要执行的一些操作。通常这种形式:

gulp.src().pipe(someplugin())

也可以是异步任务,接受callback:

// 在 shell 中执行一个命令

varexec =require('child_process').exec;

gulp.task('jekyll',function(cb){

// 编译 Jekyll

exec('jekyll build',function(err){

if(err)returncb(err);// 返回 error

cb(); // 完成 task

});

});

或者返回一个stream:

gulp.task('somename',function(){

varstream = gulp.src('client/**/*.js')

.pipe(minify())

.pipe(gulp.dest('build'));

returnstream;

});

或者返回一个promise:

varQ =require('q');

gulp.task('somename',function(){

vardeferred = Q.defer();

// 执行异步的操作

setTimeout(function(){

deferred.resolve();

}, 1);

returndeferred.promise;

});

注意: 默认task将以最大的并发数执行,gulp会一次性运行所有的task并且不做任何等待 。如果我们需要构建一个任务队列,需要做以下事情:

1) 给出提示,告知task什么时候执行完毕;

2) 再给出提示,告知task依赖另外的task的完成

这里有一个demo。两个任务:one和two。two依赖one的完成:

vargulp =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']);

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

监视文件,并且在文件改变时做一些事情,总会返回一个事件

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

glob

类型为string或array,用来指定具体监控哪些文件的变动。

opts

object类型

tasks

array类型,需要在文件变动后执行的任务名称:

varwatcher = gulp.watch('js/**/*.js', ['uglify','reload']);

watcher.on('change',function(event){

console.log('File '+ event.path +' was '+ event.type +', running tasks...');

});

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

glob

类型为string或array,用来指定具体监控哪些文件的变动。

opts

object类型

cb(event)

function类型,每次变动需要执行的函数:

gulp.watch('js/**/*.js',function(event){

console.log('File '+ event.path +' was '+ event.type +', running tasks...');

});

该event对象记录监控到的变动

event.type:变动类型如added,changed,deleted

event.path:触发该事件的文件路径

使用

首先安装好gulp:

npm install --global gulp

在项目中引用:

npm install --save-dev gulp

npm具体语法,参考别处。

默认执行default任务:

var gulp = require('gulp');

gulp.task('default', function() {

// 将你的默认的任务代码放在这

});

运行命令:

gulp

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

gulp <task> <othertask>

常用插件

这里主要将自己用到的插件进行整理,对做简单demo演示,方便日后复用。所有插件均可在 npm包查询页面 中找到。

yargs

一个用来接收命令参数并进行处理的模块, 官网api

一个demo就可以解释其使用方式:

varargv =require('yargs').argv;

if(argv.ships >3&& argv.distance <53.5) {

console.log('Plunder more riffiwobbles!');

} else{

console.log('Retreat from the xupptumblers!');

}

使用方式:

$ ./plunder.js --ships=4 --distance=22

Plunder more riffiwobbles!

$ ./plunder.js --ships 12 --distance 98.7

Retreat from the xupptumblers!

gulp-sass

一个很常用的模块,功能是将sass或scss代码转换为css代码。 官网api

具体用法请自行查阅api。这里以该站demo项目为例子,来演示该模块的使用。

首先在项目根目录下定义gulpfile.js文件:

vargulp =require('gulp'),

config = require('./public/demo/tool/config.js');

require('./public/demo/tool/scripts/sass');

gulp.task('default', ['watch:scss']);

module.exports = gulp;

其中config.js文件中定义各个插件的输入输出路径:

module.exports = {

scss: {

srcPath: {

'pa':'./public/demo/pagesDemo/scss/**/*.scss'

},

outputPath: {

'pa':'./public/demo/pagesDemo/css'

}

}

};

sass.js中则是gulp-sass模块的功能:

vargulp =require('gulp'),

sass =require('gulp-sass'),

sourcemaps = require('gulp-sourcemaps'),

config = require('../config.js').scss,

argv = require('yargs').argv;

//gulp-sass模块具体功能,将scss编译为css

gulp.task('scss',function(){

varsrcPath = config.srcPath[argv.p];

varoutputPath = config.outputPath[argv.p];

returngulp.src(srcPath)

.pipe(sourcemaps.init())

.pipe(sass({

'outputStyle':'compressed',

'errLogToConsole':true

}).on('error',sass.logError))

.pipe(sourcemaps.write('./map'))

.pipe(gulp.dest(outputPath));

});

//watch,自己监听文件修改进行编译

gulp.task('watch:scss',['scss'],function(){

varpArr = argv.p;

console.log('********您已开启watch:'+ pArr +' *********');

varcssWatcher = gulp.watch(config.srcPath[pArr],['scss']);

cssWatcher.on('change',function(event){

console.log('File '+event.path+' was '+event.type);

});

});

gulp.task('watch',['watch:scss']);

使用时:

gulp使用实践

未登录用户
全部评论0
到底啦