前端构建工具gulp的使用

是很多优秀前端程序员开发过程中对代码进行构建的工具，我可是自动化项目的构建利器；不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用了我，你们不仅可以很愉快的编写代码，而且会大大的提高你们的工作效率。快来仔细了解我吧～

为什么使用Gulp？

Gulp基于Node.js的前端构建工具，通过Gulp的插件可以实现前端代码的编译（sass、less）、压缩、测试；图片的压缩；浏览器自动刷新，还有许多强大的插件。（这就是我优秀的特点！）

基本功能：

·HTML组件化。该 common 的拎出来；该 widget 的拎出来

· 图片压缩、合并

· JS/CSS/HTML 压缩、合并

· 编译sass/less

使用gulp的步骤：

首先当然是安装nodejs， 通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行gulp任务即可。

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

命令行：

cd定位到目录，用法：cd + 路径；

dir列出文件列表；

cls清空命令提示符窗口内容。

全局安装gulp

命令提示符执行cnpm install gulp –g

查看是否正确安装：

命令提示符执行gulp -v，出现版本号即为正确安装

本地安装gulp：

cnpm install gulp --save-dev

我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

新建package.json文件

命令提示符执行cnpm init

本地安装gulp插件

定位目录命令后提示符执行cnpm install --save-dev

以gulp-less为例（编译less文件），命令提示符执行cnpm install gulp-less --save-dev

新建gulpfile.js文件（重要）

说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件

运行gulp

命令提示符执行gulp 任务名称

1

必备插件

·gulp-htmlmin看到名字就能知道，这个插件是用来压缩 HTML。PS：注释啥的都可以去掉

·gulp-imagemin除了能压缩常见的图片格式，还能压缩 SVG

·gulp-clean-css压缩 CSS。

·gulp-uglify专业压缩 Javascript

·gulp-concat上面几个都是压缩，这插件是管合并的...恭喜，“减少网络请求”的成就达成:)

·gulp-autoprefixer给 CSS 增加前缀。解决某些CSS属性不是标准属性，有各种浏览器前缀的情况，灰常有用

·gulp-rename修改文件名称。比如有时我们需要把app.js改成app.min.js，瞬间高级了

·gulp-util最基础的工具。

–save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；

譬如，想借助gulp压缩美化下js代码，写如下代码于gulpfile.js即可：

使用Gulp我们只需要放一个路径，通过管道（pipe）方式使用插件，最后生成文件

又如，用gulp-concat插件合并两个js文件：

gulp 常用的API

一、gulp.task

gulp 是基于task的方式来运行

gulp.task(name ， fn)

注册一个task, name 是task的名字， fn是task要执行的函数

二、gulp.src

gulp.src(globs)

与globs 匹配的文件，可以是string或者一个数组

三、 gulp.dest

gulp.dest(path) 就是最终文件要输出的路径

四、gulp.watch

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

就是监视文件的变化，然后运行指定的Tasks或者函数，这个相比Grunt需要使用插件，gulp本身就支持的很好。