流行得前端构建工具比较，以及gulp配置

前端如今三足鼎立的构建工具（不算比较老的ant，yeoman），非fis，grunt，gulp莫属了。

fis用起来最简单，我打算本身得项目中使用一下fis.

先说一下gulp安装吧。

第一步：安装node和npm,搭建node环境。

访问 http://nodejs.org。npm会随着安装包一块儿安装。

确保node 和npm安装，若是以下两个命令行没有正确安装得话，说明node没有安装正确。

$ node -v
  v0.12.6

$ npm -v
  2.11.2

第二步：安装gulp

认识npm:NPM是基于命令行的node包管理工具，它能够将node的程序模块安装到项目中，在它的 官网 中能够查看和搜索全部可用的程序模块。

sudo npm install -g gulp 

1. sudo是以管理员身份执行命令，通常会要求输入电脑密码

2. npm是安装node模块的工具，执行install命令

3. -g表示在全局环境安装，以便任何项目都能使用它

4. 最后，gulp是将要安装的node模块的名字
5. 完成后，在终端（Terminal）输入命令行，查看gulp有没有安装成功

   yangh1deMac-mini:static_global yangh1$ gulp -v
   CLI version 3.9.0Local version 3.9.0

6. 咱们须要将gulp安装到项目本地

• npm install —-save-dev gulp

  这里，咱们使用 —-save-dev 来更新package.json文件，更新devDependencies 值，以代表项目须要依赖gulp。Dependencies 能够向其余参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系，想要更加深刻的了解它能够看看 package.json文档 。

 第三步：新建Gulpfile文件，运行gulp

安装好gulp后咱们须要告诉它要为咱们执行哪些任务，首先，咱们本身须要弄清楚项目须要哪些任务。

• 检查Javascript
• 编译Sass（或Less之类的）文件
• 合并Javascript
• 压缩并重命名合并后的Javascript

安装依赖，提醒下，若是以上命令提示权限错误，须要添加 sudo 再次尝试。

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

新建gulpfile文件

如今，组件都安装完毕，咱们须要新建gulpfile文件以指定gulp须要为咱们完成什么任务。

gulp只有五个方法： task ， run ， watch ， src ，和 dest ，在项目根目录新建一个js文件并命名为 gulpfile.js ，把下面的代码粘贴进去：//// 引入 gulp

var gulp = require('gulp'); // 引入组件
var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');

// 检查脚本
gulp.task('lint', function() { gulp.src('./js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // 编译Sass
gulp.task('sass', function() { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); // 合并，压缩文件
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')); }); // 默认任务
gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 监听文件变化
    gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); });

1.引入组件：咱们引入了核心的gulp和其余依赖组件，接下来，分开建立lint, sass, scripts 和 default这四个不一样的任务。

2.Lint:Link任务会检查 js/ 目录下得js文件有没有报错或警告。

3.sass任务：Sass任务会编译 scss/ 目录下的scss文件，并把编译完成的css文件保存到/css 目录中。

4.Scripts任务：scripts任务会合并 js/ 目录下得全部得js文件并输出到 dist/ 目录，而后gulp会重命名、压缩合并的文件，也输出到 dist/ 目录。

5.defaul任务：咱们建立了一个基于其余任务的default任务。使用 .run() 方法关联和运行咱们上面定义的任务，使用 .watch() 方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其余任务。

多看一些

gulp和grunt比较不错得文章：http://www.jianshu.com/p/3779f708f5d7/  我以为写得比较清晰。

                                          https://segmentfault.com/a/1190000002491282

                                          http://www.ydcss.com/archives/18     目前发现写得最简单清晰gulp入门教程

Gruntfile维护起来那么困难，有几个缘由：

• 配置和运行分离
  程序员都知道，变量的声明和使用挨在一块儿，最方便理解和修改。但Gruntfile里，配置Task和调用它们的地方离得很远，极大地增长了心智负担。

• 每一个插件作的事太多
  每一个Task的结果必须写到磁盘文件，另外一个Task再读，损害性能却是小事，更麻烦的是让整个过程变复杂了。
  就像一个个小做坊，来料加工又返回给客户，这中间的沟通成本、出错机会都大大增长。

• 配置项过多
  作事多了，配置项天然也多。至少输入和输出的位置得配吧。每一个插件的配置规则还不尽相同。用每一个插件，都得去学习一番。

    

Gulp是怎么解决的：

• 配置和运行分离
  code over configuration，直接就在调用的地方配置。

• 每一个插件作的事太多
  单一职责，依靠组合来发挥做用。就像一条自动化生产线，上一道工序的产出直接交给下一步，效率不要过高。

• 配置项过多既然你们都遵循同一个协议，不少配置就不须要了。