自动构建工具Gulp
摘要:
gulp与grunt一样,都是自动构建工具。和grunt相比它更突出一个流的概念,任务是一个接一个执行的。今天就分享如何用gulp做自动化。
安装:
gulp也是基于node环境,所以安装gulp之前你需要安装node.js。
npm install -g gulp
只要在命令窗口中执行上面一行命令就完成安装,这样安装的是全局安装。在项目中一般是通过package.json中的devDependencies属性来安装。如下:
{
"name": "",
"version": "0.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"gulp": "~3.5.6"
},
"license": "ISC"
}
执行npm install就会将gulp安装到当前项目中。
如何运行:
安装完gulp之后,需要新建一个gulpfile.js文件,一般是在项目的根目录,与package.json放在一块。那gulpfile.js文件里面到底写什么呢?当然是定义一些任务。如下:
var gulp = require('gulp'); gulp.task('default', function() {
// 执行任务
});
然后在当前目录中通过命令窗口执行gulp,default里面的任务就会被执行。
配置参数:
gulp.src(globs[, options])
加载文件,并将文件以流的方式传到插件中,如下:
gulp.src('client/templates/*.jade')
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest('build/minified_templates'));
gulp首先会加载client/templates/下的所有jade文件,然后分别传递给jade插件、minify插件,然后输出到build/minified_templates中。
globs
类型:String,Array
文件或者是路径,多个文件以数组的形式。
options
类型:Object
gulp通过options将配置参数传递给node
options.buffer
类型:bool
默认值: false
是否将文件以流的方式返回,false设置文件内容以流的方式读取,并且不缓存,对于大文件设置缓存将是非常有用的。
options.read
类型:bool
默认值:true
设置是否读取文件,如果设置false将永远不读取文件
options.base
类型: String
设置输出文件的根目录,如下:
gulp.src('client/js/**/*.js') // Matches 'client/js/somedir/somefile.js' and resolves `base` to `client/js/`
.pipe(minify())
.pipe(gulp.dest('build')); // Writes 'build/somedir/somefile.js' gulp.src('client/js/**/*.js', { base: 'client' })
.pipe(minify())
.pipe(gulp.dest('build')); // Writes 'build/js/somedir/somefile.js'
gulp.dest(path[, options])
输出文件,可以输出到不同目录下,如果目录不存在就创建,如下:
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
path
类型: String,Function
设置输出文件的路径
options.cwd
类型: String
默认值: process.cwd()
输出的文件夹,只有当路径为相对路径时才起作用
options.mode
类型:String
默认值:0777
设置输出文件的权限
gulp.task(name[, deps], fn)
定义一个任务,如下:
gulp.task('somename', function() {
// Do stuff
});
name
任务名,调用任务是只需要gulp.run(任务名)
deps
类型:Array
执行当前任务所需要依赖的任务,被依赖的任务会在当前任务执行之前执行。注意异步任务
fn
需要执行的任务都定义在此处
异步执行任务:
使用回调函数
// run a command in a shell
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
// build Jekyll
exec('jekyll build', function(err) {
if (err) return cb(err); // return error
cb(); // finished task
});
});
返回一个文件流
gulp.task('somename', function() {
var stream = gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
return stream;
});
使用promise
var Q = require('q'); gulp.task('somename', function() {
var deferred = Q.defer(); // do async stuff
setTimeout(function() {
deferred.resolve();
}, 1); return deferred.promise;
});
注意任务依赖关系,下面是一个例子:
var gulp = require('gulp'); // takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
// do stuff -- async or otherwise
cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
}); // identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
// task 'one' is done now
}); gulp.task('default', ['one', 'two']);
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
监听文件,当文件发生变化时,定义的任务将会被执行。如下当js文件发生改变时会触发change事件。
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
或者:
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
实例:
下面是一个简单的例子,实现js、css的压缩合并。
package.json安装模块
{
"name": "",
"version": "0.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"gulp": "~3.5.6",
"gulp-minify-css": "~0.3.0",
"gulp-uglify": "^1.0.0",
"gulp-concat": "~2.0.0",
"gulp-rename": "^1.0.0"
},
"license": "ISC"
}
gulpfile.js
var gulp = require('gulp'); // 加载模块
var
minifycss = require('gulp-minify-css'), // CSS压缩
uglify = require('gulp-uglify'), // js压缩
concat = require('gulp-concat'), // 合并文件
rename = require('gulp-rename'); // 重命名 // 合并、压缩、重命名css
gulp.task('min-styles', function() {
gulp.src(['./static/css/*.css'])
.pipe(concat('all.css'))
.pipe(gulp.dest('./static/build/css/'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('./static/build/css'));
}); // 合并,压缩js文件
gulp.task('min-javascripts', function() {
gulp.src('./static/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./static/build/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('./static/build/js'));
}); // 定义develop任务发布或者运行时使用
gulp.task('develop',function(){
gulp.run('min-styles','min-javascripts');
}); // gulp命令默认启动的就是default
gulp.task('default', function() { // 监听.css文件,一旦有变化,立刻调用min-styles任务执行
gulp.watch('./css/*.css', ['min-styles']); gulp.run('develop');
});
在gulpfile.js文件目录下,通过命令窗执行gulp,则default任务就会执行。
自动构建工具Gulp的更多相关文章
- 前端自动构建工具@gulp入门
gulp是一个自动化的前端工具.它可以利用自身的插件来实现一些功能,如sass.less编译:浏览器自动刷新,文件压缩.重命名.代码校验(个人使用sublime的插件进行校验)等功能.当然这些功能也可 ...
- 前端自动构建工具Gulp入门
基于nodeJs:通过不同插件能自动完成一系列动作,比如压缩js/css/img.解析模版标签.解析less等: 一.安装gulp 安装nodeJs 打开Node.js command prompt ...
- 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用
关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用 工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- (转载)前端构建工具gulp使用
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- 怎么在项目中使用前端包管理器bower和构建工具gulp
下面以WeUI(微信官方网页开发样式库)介绍一下,怎么把WeUi引入到自己的项目中,我的开发环境Visual Studio 2012,当然了Visual Studio 2015对此已有了更好的支持(h ...
- 前端自动化构建工具-gulp
gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...
- 构建工具-Gulp 相关知识
layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...
随机推荐
- UI设计 - 手机列表风格总结
1 概述 1.1 背景 对UI设计过程中常见的列表风格进行总结.希望对后续的设计工作有所帮助 1.2 预期读者 UI设计师,用户体验设计师,项目经理,美工 1.3 ...
- 【C】——fread函数和read函数的区别
1,fread是带缓冲的,read不带缓冲. 2,fopen是标准c里定义的,open是POSIX中定义的. 3,fread可以读一个结构.read在linux/unix中读二进制与普通文件没有区别. ...
- sourcetree向github推送代码提示密码错误
明明用户名和密码都是正确,sourceTree却在推送代码的时候提示无效的用户名或密码. 1.设置 2.选中并编辑 3.如果你本来选择的就是 GitHub,或者选择完以后还是不行的话,在 URL / ...
- 【转】C#多线程环境下调用 HttpWebRequest 并发连接限制
.net 的 HttpWebRequest 或者 WebClient 在多线程情况下存在并发连接限制,这个限制在桌面操作系统如 windows xp , windows 7 下默认是2,在服务器操作 ...
- 关于Unity中新版动画系统的使用
Mecanim动画 1:旧版动画系统只能通过代码来控制动画播放,随着动画种类变多,代码复杂度也会增加,同时动画过渡也需要非常繁琐的代码控制,为了让有经验的动画师开发动画,unity推出了针对人物角色的 ...
- CentOS 7 之前好好的,突然一天启动时黑屏,没有登陆界面了(配置 network-scripts 连网)
原因: 百度大神说是Gnome(一套纯粹自由的计算机软件,运行在操作系统上,提供图形桌面环境)不行了. 解决方法: 1. 重启系统,ctrl + alt + F2 进入命令行界面. 2. sudo s ...
- Java如何显示线程状态?
在Java编程中,如何显示线程状态? 以下示例演示如何使用Thread类的isAlive()和getStatus()方法显示线程的不同状态. package com.yiibai; class MyT ...
- Java如何使用线程解决死锁?
在Java编程中,如何使用线程解决死锁? 以下示例演示如何使用线程的概念解决死锁问题. // from W w w .Y I I b AI.c o M package com.yiibai; impo ...
- 针对程序集 'SqlServerTime' 的 ALTER ASSEMBLY 失败,因为程序集 'SqlServerTime' 未获授权(PERMISSION_SET = EXTERNAL_ACCESS)
错误: 针对程序集 'SqlServerTime' 的 ALTER ASSEMBLY 失败,因为程序集 'SqlServerTime' 未获授权(PERMISSION_SET = EXTERNAL_A ...
- openssl创建自己的CA certificate
Create a Certificate Authority private key (this is your most important key): $ openssl req -new -ne ...