前端构建工具Gulp的使用介绍

Gulp是一个构建系统,它能自动执行常见任务,比如编译预处理CSS,压缩和混淆JavaScript,刷新浏览器,按需求生成不同的项目目标等。

通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp有丰富的插件可以使用,并且插件的使用都非常简单,掌握Gulp毫不费力。

一、Gulp的安装

1、全局安装gulp:(以下两个命令等价)

2、作为项目的开发依赖:

这条命令会在安装gulp的时候写进项目package.json文件的依赖中,倘若不想添加,可以去掉“–save-dev”参数:

3、上面安装了两次gulp,一次是全局安装,一次是在项目中安装,为什么要安装两次呢?要追究细节的话可以参考下面的两篇文章,why-do-we-need-to-install-gulp-globally-and-locallywhat-is-the-point-of-double-install-in-gulp,大体上就是为了teamwork的时候版本的控制什么的,不理解也无伤大雅,只需要正确使用就可以了。

二、Gulp使用详解

1、创建gulpfile.js文件

在项目中新建gulpfile.js文件,然后要做的事情就是添加要执行的任务了。如下所示是一个简单的空的任务,在项目目录下的命令行中输入gulp即可执行默认的任务,也即“default”任务。

此时项目的目录结构如下,这也是gulp构建项目最基本的结构。

|── gulpfile.js
|── node_modules
|        [── gulp
|── package.json

2、运行Gulp任务

上面已经说了执行默认任务的方法,执行其他任务也是一样的,只需要指定任务名即可,例如gulp taskA,没有指定,当然就执行默认的default任务了。

三、使用gulp进行项目构建

使用gulp,只需要掌握4个API:

gulp.task(),gulp.src(),gulp.dest(),gulp.watch()

这里就直接引入博客园一篇比较好的文章来讲述了,前端构建工具gulpjs的使用介绍及技巧

四、gulp升级应用

除了以上以及上篇文章中讲述的gulp的应用之外,还想介绍几个gulp的插件和项目构建的方法。http://www.cnblogs.com/Darren_code/p/gulp.html,这篇文章中也介绍了很多插件可以参考。