options.cwd
Type: String Default: process.cwd()
cwd for the output folder, only has an effect if provided output folder is relative.
options.mode
Type: String Default: 0777
Octal permission string specifying mode for any folders that need to be created for output folder.
修改之前的gulpfile.js的内容如下:
var gulp = require('gulp');
gulp.task('testtask', function() {
gulp.src('./js/test.js')
.pipe(gulp.dest('./build'));
});
引言
gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,gulp 借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单.
Gulp 安装
安装 gulp 之前,先安装 Node.js,然后全局安装gulp:
安装完之后,可以检测gulp的版本:
全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中,然后在命令行中执行:
如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:
--save:将保存配置信息至 package.json(package.json是nodejs项目配置文件。package.json是一个普通json文件,不能添加任何注释。参看 http://www.zhihu.com/question/23004511 ); -dev/-dep:保存至package.json的devDependencies节点,不指定-dev/dep将保存至dependencies节点。
安装Gulp之后,可以运行npm init初始化package.json文件:
需要注意的是,name是不能包含大写字母的:
初始化之后,需要在项目的根目录下建立gulpfile.js文件,文件名不能更改:
默认任务将被运行,向控制台输出hello gulp。如果需要运行单个任务, 使用 gulp taskname命令(上述等效于gulp default)。
荐读:gulp官方的 Getting Started
Gulp API
gulp在git上只介绍了四个API:
task
、dest
、src
、watch
,除此之外,gulp还提供了一个run
方法。1.gulp.src(globs[, options])
src()方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件.
globs的文件匹配说明:
“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文件);
options的三个属性说明: options.buffer: 类型:Boolean 默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用; options.read: 类型:Boolean 默认:true 设置false,将不执行读取文件操作,返回null; options.base: 类型:String 设置输出路径以某个路径的某个组成部分为基础向后拼接
2.gulp.dest(path[, options])
dest()方法是指定处理完后文件输出的路径;
修改之前的gulpfile.js的内容如下:
运行结果如下图:
利用gulp.dest('./build')将新建的test.js文件移动到了build目录,对比前后两次的ls -al命令,dest()会自动创建目录。
3.gulp.task(name[, deps], fn)
该方法用于定义一个gulp任务。
再次修改gulpfile.js文件,定义一个任务列表
运行结果:
4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
watch()方法是用于监听文件变化,文件一修改就会执行指定的任务.
每当监视的文件发生变化时,就会调用cb函数,并且会给它传入一个对象,该对象包含了文件变化的一些信息: type: 属性为变化的类型,可以是 added,changed,deleted path: 属性为发生变化的文件的路径
5.gulp.run()
gulp模块的run()方法,表示要执行的任务。可能会使用单个参数的形式传递多个任务。注意:任务是尽可能多的并行执行的,并且可能不会按照指定的顺序运行.
修改之前的gulpfile.js文件中的end任务:
运行结果:
三、gulp常见插件
1.gulp-uglify
使用gulp-uglify压缩javascript文件,减小文件大小。利用npm先安装gulp-uglify:
安装之后,在gulpfile.js中引入:
2.gulp-rename
用来重命名文件流中的文件。用gulp.dest()方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用gulp-rename插件来改变文件流中的文件名。
简单运用:
3.gulp-minify-css
压缩css文件时并给引用url添加版本号避免缓存:
简单运用:
4.gulp-htmlmin
使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作。
简单使用:
5.gulp-concat
用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了.
简单使用:
其它常用插件: gulp-imagemin: 压缩图片文件 gulp-jshint: 侦测javascript代码中错误和潜在问题的工具
相关文章
gulp plugins 插件介绍 gulp api