流行得前端构建工具比较，以及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，直接就在调用的地方配置。

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

  • 配置项过多
    既然大家都遵循同一个协议，很多配置就不需要了。

posted @ 2016-04-28 11:29  前端之旅，羊羊  阅读(1067)  评论(0)  编辑  收藏  举报