目录

    1. 前端自动化构建工具

    在处理前端场景时,用 Less 写 CSS,用 Jade 写 HTML,用 Browserify 模块化,为非覆盖式部署的资源加 MD5 戳等。这些工作如果纯手工来做,工作效率将会非常低。而前端自动化构建工具可以把这些重复工作一次配置,多次重复执行,极大的提高开发效率。

    前端自动化构建工具主要提供如下特征功能:

    • 版本控制
    • 检查 JS
    • 图片合并
    • 压缩并重命名 CSS
    • 压缩并重命名 JS
    • 编译 LESS、SASS

    2. 常见的前端自动化构建工具

    2.1 Grunt

    基于 Node.js 的插件工具 Grunt,本身是一个执行器,大量的功能都存在于NPM管理的插件中。特别是以 grunt-contrib- 开头的核心插件,覆盖了大部分的核心功能,比如 handlebars,jade,less,compass,jshint,jasmine,clean,concat,minify,copy,uglify,watch,minify,uglify 等。可以把 grunt 理解为一组 task,比如说合并若干 js(concat)、压缩js(min)、测试js(qunit)等等。

    2.2 Gulp

    基于 Node.js 的插件工具 Gulp,主要是针对 Grunt 的不足发起的一个项目。由于借鉴了 Unix 操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。相比 Grunt 频繁的 I/O 操作,Gulp 能更快地更便捷地完成构建工作。

    Gulp 具有如下优点:

    1. 使用 gulp.js,你的构建脚本是代码,而不是配置文件;
    2. 使用标准库(node.js standard library)来编写脚本;
    3. 插件都很简单,只负责完成一件事-基本上都是 20 行左右的函数;
    4. 任务都以最大的并发数来执行;
    5. 输入/输出(I/O)是基于“流式”的。

    2.3 Yeoman

    Yeoman 是 Google 领头开发的一个前端构建工具,它的目的是为了给新项目建立一个完整的工作流,让开发人员可以专注于解决问题而不是担心那些不必要的小事情。Yeoman 提供 generator 系统,一个 generator 是一个插件。Yeoman 提供了三个工具:脚手架(yo),构建工具(grunt),包管理器(bower)。这三个工具是分别独立开发的,但是需要配合使用,来实现我们更高效的工作流模式。

    其他还有百度的 FIS3WebpackRollup.js

    3. Gulp 安装与配置

    Gulp 是基于 Nodejs 构建的工具。首先需要安装 Nodejs 和 NPM 包管理工具。

    3.1 安装 gulp

    npm install -g gulp  //以全局方式安装
    

    使用 gulp -v 命令可以查看 Gulp 版本号,每构建一个新项目时,都需要从这步骤开始再单独安装一次,保持每个项目的独立性。

    3.2 开始使用 gulp 构建项目

    生成 package.json

    npm init
    

    3.3 常用的 gulp 插件

    npm install --save-dev gulp            //本地使用gulp  <br>
    npm install --save-dev jshint <br>
    npm install --save-dev gulp-jshint     //js代码检测<br>
    npm install --save-dev gulp-uglify     //js压缩<br>
    npm install --save-dev gulp-livereload //页面自动刷新<br>
    npm install --save-dev gulp-webserver  //静态服务器<br>
    

    其他插件 gulp-load-plugins //自动加载package.json中的文件依赖 gulp-imagemin //压缩图片 gulp-minify-css //压缩css gulp-ruby-sass //sass gulp-concat //文件合并 gulp-rename //文件重命名 png-sprite //png合并 gulp-htmlmin //压缩html gulp-clean //清空文件夹 browser-sync //文件修改浏览器自动刷新 gulp-shell //执行shell命令 gulp-ssh //操作远程机器 run-sequence //task顺序执行

    注:–save 是对生产环境所需依赖的库,–save-dev 是对开发环境所需依赖的库。只需要选择使用到的库安装即可。在安装完毕相关包之后,gulp 会自动将包的版本信息添加到 package.json 文件中。

    3.4 Gulp 任务配置:gulpfile.js

    gulp 是一个 task 的执行器,需要将每个 task 写入 gulpfile.js,Gulp 才能够自动化执行。在根目录下创建 gulpfile.js文件,也可以参考官方说明 :

    var  gulp = require('gulp'), 
          jshint = require('gulp-jshint'),
          uglify = require('gulp-uglify'),
          livereload = require('gulp-livereload');
    
    //校验JS文件,jshint校验规则
    gulp.task('lint', function() { 
          return gulp.src('src/js/\*\*/\*.js') 
          .pipe(jshint()) 
          .pipe(jshint.reporter('default'));
    }); 
    
    //压缩JS文件
    gulp.task('scripts', function() { 
          return gulp.src('src/js/\*\*/\*.js')
          .pipe(uglify())
          .pipe(gulp.dest('dist/js'));
    
    // 预设任务<br>
    gulp.task('default', function() {
          gulp.start('lint', 'scripts');
    });
    
    // 看守<br>
    gulp.task('watch', function() {     
           gulp.watch('src/js/\*.js',['lint','scripts']);       
           livereload.listen();
           // Watch any files in dist/, reload on change
           gulp.watch(['dist/\*\*']).on('change', livereload.changed);
    });<br>
    

    项目的目录结构:

    
    │ gulpfile.js 
    │ package.json
    │ node_modules
    ├─dist 
    │     └─js 
    │         main.js 
    │          
    └─src
       └─js 
          │ main.js
          │ index.html
    

    在项目的根目录下,执行 gulp 命令,执行 task 任务,完成编译。

    gulp
    

    每次修改都需要执行一次gulp命令,比较麻烦,直接使用gulp watch命令看守,当发生变化时自动执行指定的task。

    gulp watch
    

    4. 参考