gulp

#Gulp 自动化构建简易教程

• ##简介

  gulp 是前端开发过程中对代码进行自动化构建的工具软件，是项目自动化构建的利器。她不仅能对网站资源进行优化，而且在开发过程中可以完成很多重复的任务。使用 gulp 可以大大提高我们的开发效率。

• ##目的
  我们希望在我们的前端工程中使用 gulp 来实现：

  1、将开发环境中的部分代码按上线规则进行筛选，形成 <dist> 目录用于线上部署
  2、将开发环境中的部分代码按测试规则进行筛选，形成 <test> 目录用于脚本测试
  3、将开发环境中的 <资源路径> 替换成生产环境或测试环境中的 <资源路径>
  4、压缩 .html .css .js .png 文件
  5、合并 .html .css .js .png 文件
  6、在生产环境中，删除 注释 打印 等调试语句
  7、在测试环境中，需要调试的地方添加打印等调试语句
  8、分别在不同的环境下，配置对应的环境变量。例如：生产环境域名或对象存贮路径等。
  

• ##安装

  ###第一步：下载安装 Node

  ######1、访问 http://nodejs.org 下载对应系统下的安装包，安装 Node.js 和 npm 程序管理包。

  ######2、确保 Node.js 安装正确。

  node -v // 得到 node 的版本号
  

  ######3、确保 npm 安装正确。

  npm -v // 得到 npm 的版本号
  

  ###第二步：安装 Gulp

  ######1、在全局环境上安装 gulp

  sudo npm install gulp -g // MacOS 下全局安装需要 sudo 权限
  

  ###第三步：配置需要 Gulp 自动构建的项目

  ######1、新建一个需要 gulp 自动化构建的工程，并进入到工程的根目录。

  cd ~/Develop/gx-cms
  

  ######2、在该目录下初始化 node 插件管理配置文件。

  npm init
  

  ######3、本地安装 gulp

  npm install gulp --save-dev
  

  ######4、安装项目需要的 gulp 组件

  npm install gulp-concat gulp-minify-css gulp-rev gulp-rev-collector gulp-imagemin --save-dev
  

  ###第四步：运行 Gulp

  ######1、建立 gulpfile.js 任务运行文件，格式如下

  var gulp = require('gulp');
  var concat = require('gulp-concat');                        //- 多个文件合并为一个；
  var minifyCss = require('gulp-minify-css');                 //- 压缩CSS为一行；
  var rev = require('gulp-rev');                              //- 对文件名加MD5后缀
  var revCollector = require('gulp-rev-collector');           //- 路径替换
  
  gulp.task('concat', function() {                            //- 创建一个名为 concat 的 task
    gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css'])  //- 需要处理的css文件，放到一个字符串数组里
            .pipe(concat('wap.min.css'))                      //- 合并后的文件名
        .pipe(minifyCss())                                    //- 压缩处理成一行
        .pipe(rev())                                          //- 文件名加MD5后缀
        .pipe(gulp.dest('./css'))                             //- 输出文件本地
        .pipe(rev.manifest())                                 //- 生成一个rev-manifest.json
        .pipe(gulp.dest('./rev'));                            //- 将 rev-manifest.json 保存到 rev 目录内
  

});

gulp.task('rev', function() {
//- 读取 rev-manifest.json 文件以及需要进行css名替换的文件 gulp.src(['./rev/*.json', './application/**/header.php']) .pipe(revCollector()) //- 执行文件内css名的替换 .pipe(gulp.dest('./application/')); //- 替换后的文件输出的目录 });

gulp.task('default', ['concat', 'rev']);

######2、执行 `gulp` 任务

gulp // 在项目跟目录下执行 gulp 命令