剑客
关注科技互联网

gulp使用实践

以前,在自己的工程中用过 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使用实践

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址