前端构建工具之Gulp使用记录

安装指南

(1) 全局安装:  $ npm install --global gulp

项目的开发依赖安装: $ npm install --save-dev gulp

(2) 在项目根目录下创建名为gulpfile.js 的配置文件 AMD规范

var gulp = require('gulp');

gulp.task('default',function(){//默认的任务代码})   //default为任务名

(3) 运行gulp //执行全部任务

gulp <task> <othertask>  //单独执行特定任务


更多功能参数: .src  .watch  .dest  CLI

gulp.src(globs[,options])  输出符合所提供的匹配模式或者匹配模式的数组的文件。将返回一个Vinyl files的stream,它可以呗piped到别的插件中去。

gulp.src('client/template/*.jade',{buffer:true,read:true,base:'client'})

.pipe(jade())

.pipe(minify())

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


gulp.dest(path,[,options]);  //重新输出(emits)所有数据,并且可以pipe到多个文件夹


gulp.task(name,[,deps],fn); //定义一个使用Orchestrator实现的任务task    deps: 一个包含任务列表的数组,这些任务将会在你当前任务运行之前完成。 确保异步执行方式:使用一个callback , 或者返回一个 promise 或 stream。

task在gulp中是以最大的并发数执行。如果你想创建一个序列化的task队列,并以特定顺序执行,你将要:给出提示,告知task什么时候完成,告知依赖任务你需要等待被依赖的任务完成。


gulp.watch(glob[,opts],tasks) 或者 gulp.watch(golb[,opts,cb]);  //监控文件、当文件发生变化时,返回一个EventEmitter来发射change事件。CB为回调函数 tasks是回调任务列表。

var watcher=gulp.watch('js/**/*.js',['default','reload']);   watcher.on('change',function(e){console.log(e)});

gulp.watch('js/**/*.js',function(e){console.log(e)});


CLI(命令行界面)

-v  or --version  显示全局或者项目本地安装的gulp版本号。

--require

--gulpfile

--cwd

-T or --tasks

--tasks-simple

--color

--no-color

--silent  禁止所有gulp日志


GULP的插件

gulp-load-plugins:自动加载插件  自动读取package.json中依赖的插件

gulp-rename :重命名插件

gulp-uglify :js文件压缩

gulp-minify-css : css文件压缩

gulp-minify-html :html文件压缩

gulp-jshint :js代码检查格式

gulp-concat :文件合并

gulp-less , gulp-sass :文件编译

等等。。。


总结

gulpjs是一个前端构建工具、配置参数简单、api简单。使用的是nodejs的stream来读取和操作数据、速度更快。

基于NPM进行配置。








猜你喜欢

转载自blog.csdn.net/u010682774/article/details/78890296