前端自动化工具Gulp

如今前端提到构建工具会自然想起Grunt,Grunt.js是基于Node.js的自动化任务运行器。去年Fractal公司发布了一个新的构建系统Gulp,希望能够取其精华,并取代Grunt,成为最流行的JavaScript任务运行器。

gulp

你可以使用Gulp及其插件对你的项目代码进行编译,还可以压缩你的js和css代码,甚至压缩你的图片等。Gulp和Grunt一样是用Node.js写的,所以你需要在你的终端上安装好Node.js,然后使用Node.js的npm包管理器安装Gulp。

安装

gulp安装命令
npm install -g gulp
在根目录下新建package.json文件
npm init .
安装插件包
npm install gulp gulp-browserify --save-dev
–save-dev 命令配置,可以自动在工程目录的package.json文件内生成包依赖信息

Sample gulpfile.js

Gulp命令介绍

gulp.src(globs[, options]):任务处理的目标文件,可以是数组的形式,返回的是stream
gulp.dest(path[, options]):用于指定输出位置
gulp.task(name[, deps], fn):定义一个任务目标,返回值为一个stream,stream的使用是Gulp.js的核心,Gulp.js充分利用了Node.js的Streams API
gulp.watch(glob[, opts], tasks) or gulp.watch(glob[, opts, cb]):监视的文件变动后执行某任务
其中pipe()是stream的核心方法


gulp官方API文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 插件大全:http://gulpjs.com/plugins/
gulp 中文文档(彩色):https://github.com/osscafe/gulp-cheatsheet

发表评论

电子邮件地址不会被公开。 必填项已用*标注