gulp
安装gulp
我们已经知道如何使用命令行，现在尝试点新的东西，认识npm然后安装gulp。
在命令行中输入
sudo npm install -g gulp
- sudo是以管理员身份执行命令，一般会要求输入电脑密码；
- npm是安装node模块的工具，执行install命令；
-
-g表示在全局环境安装，以便任何项目都能使用它； - 最后，gulp是将要安装的node模块的名字。
运行时注意查看命令行有没有错误信息，安装完成后， 你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。
gulp -v
接下来，我们需要将gulp安装到项目本地
npm install --save-dev gulp
这里，我们使用--save-dev来更新package.json文件，更新devDependencies值，
以表明项目需要依赖gulp。
Dependencies可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系， 想要更加深入的了解它可以看看package.json文档。
新建Gulpfile文件，运行gulp
安装好gulp后我们需要告诉它要为我们执行哪些任务，首先，我们自己需要弄清楚项目需要哪些任务。这里举例出几个很常用的功能。
- 检查js。这里使用的是gulp-jshint外挂来完成这项功能；
-
编译sass。sass是一种css预处理语言，
它弥补了css本身无法完成像其它编程语言一样的嵌套、继承、设置变量等工作。
这里使用
gulp-compass外挂来完成这项功能。使用gulp-compass需要先安装compass， 因为这篇文章的主角是gulp，所以暂且不对compass做过多说明了。 -
合并js。这里使用
gulp-concat外挂来完成这项功能； -
压缩并重命名合并后的js。这里使用
gulp-uglify外挂和gulp-rename外挂配合来完成这项任务。
安装依赖
选择Gulp组件
前端项目需要的功能：
- 图片（压缩图片支持jpg、png、gif）
- 样式 （支持sass 同时支持合并、压缩、重命名）
- javascript （检查、合并、压缩、重命名）
- html （压缩）
- 客户端同步刷新显示修改
- 构建项目前清除发布环境下的文件（保持发布环境的清洁）
通过gulp plugins，寻找对于的gulp组件
- gulp-imagemin: 压缩图片
- gulp-cache: 图片缓存，只有图片更新了才刷新缓存
- gulp-ruby-sass: 支持sass
- gulp-minify-css: 压缩css
- gulp-jshint: 检查js
- gulp-uglify-es: 压缩js，注意老版本gulp-uglify不支持es2015，已经废弃
- gulp-concat: 合并文件
- gulp-rename: 重命名文件
- gulp-htmlmin: 压缩html
- gulp-clean: 清空文件夹
- gulp-livereload: 服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）
npm install gulp-clean gulp-jshint gulp-compass gulp-less gulp-concat gulp-uglify-es gulp-rename gulp-minify-css --save-dev # 或全局安装 npm install -g gulp-clean gulp-jshint gulp-compass gulp-less gulp-concat gulp-uglify-es gulp-rename gulp-minify-css
-save和-save-dev可以省掉你手动修改package.json文件的步骤。
-
npm install module-name -save自动把模块和版本号添加到dependencies部分 -
npm install module-name -save-dev自动把模块和版本号添加到devdependencies部分
新建gulpfile.js文件
现在，组件都安装完毕，我们需要新建gulpfile.js文件以指定gulp需要为我们完成什么任务。
gulp只有五个方法：task，run，watch，src，和dest。
-
gulp.task(name[, deps], fn)定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数 -
gulp.run(tasks...)：尽可能多的并行运行多个task -
gulp.watch(glob, fn)：当glob内容发生改变时，执行fn -
gulp.src(glob)：置需要处理的文件的路径，可以是多个文件以数组的形式，也可以是正则 -
gulp.dest(path[, options])：设置生成文件的路径
glob：可以是一个直接的文件路径。他的含义是模式匹配。
gulp将要处理的文件通过管道（pipe()）API导向相关插件。通过插件执行文件的处理任务。
gulp.task('default', function () {...});
gulp.task这个API用来创建任务，在命令行下可以输入$ gulp [default]，（中括号表示可选）来执行上面的任务。
- gulp官方API文档：https://github.com/gulpjs/gulp/blob/master/docs/API.md
- gulp 插件大全：http://gulpjs.com/plugins/
在项目根目录新建一个js文件并命名为gulpfile.js。
我按照代码书写顺序贴上代码并依次讲解，大家把每一块代码拼接在一起就是完整文件了。
多感人啊~多么有节操呀~大家用起来一点不打麻烦~
引入外挂
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
compass = require('gulp-compass'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
这一步，我们引入了核心的gulp和其他依赖组件，接下来，
分开创建lint, sass, scripts 和 default这四个不同的任务。
Lint任务
gulp.task('lint', function() {
gulp.src('./js/*.js').pipe(jshint())
.pipe(jshint.reporter('default'));
});
Link任务会检查js/目录下得js文件有没有报错或警告。
Compass任务
gulp.task('compass', function() {
gulp.src(['scss/**/**/*.scss','!scss/lib/*.scss'])
.pipe(compass({config_file: './config.rb', css: 'css', sass: 'scss',
comments: true})).pipe(gulp.dest('css'));
});
Compass任务会编译scss/目录下的scss文件，
并把编译完成的css文件保存到/css目录中。
Compass配置
这里我要着重说明一下gulp-compass中的几个至关重要的配置项：
| 默认 | 描述 | |
|---|---|---|
| comments | false | 是否显示注释。 |
| css | css | 指定输出的css文件目录。 |
| sass | sass | 指定待编译的scss文件目录。 |
css sass配置内容必须要和config.rb文件中的css sass项配置内容相同，否则无法完成编译。
Scripts 任务
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
scripts任务会合并js/目录下得所有得js文件并输出到dist/目录，
然后gulp会重命名、压缩合并的文件，也输出到dist/目录。
default任务
gulp.task('default', function() {
gulp.run('lint', 'compass', 'scripts');
gulp.watch('./js/*.js', function() {
gulp.run('lint', 'sass', 'scripts');
});
});
这时，我们创建了一个基于其他任务的default任务。
使用.run()方法关联和运行我们上面定义的任务，
使用.watch()方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。
现在，回到命令行，可以直接运行gulp任务了。
gulp
这将执行定义的default任务，换言之，这和以下的命令式同一个意思
gulp default
当然，我们可以运行在gulpfile.js中定义的任意任务，比如，现在运行sass任务：
gulp compass
LiveReload配置
- 安装Chrome LiveReload：https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
- 通过npm安装http-server ，快速建立http服务
npm install http-server -g
启动HTTP服务器：
-
cd到工程根目录下的
dist目录 -
运行
http-server启动HTTP服务器，默认端口是8080
代码改动时自动布署：
- 再打开一个cmd，通过cd找到项目根目录，执行gulp，清空发布环境并初始化
-
执行监控
gulp watch - 点击chrome上的LiveReload插件，空心变成实心即关联上，你可以修改css、js、html即时会显示到页面中。