gulp

#Gulp Automated Build Easy Tutorial

• ##Introduction

  gulpIt is a tool software for automating the construction of code in the front-end development process, and it is a tool for automatic construction of projects. Not only can she optimize website resources, but she can also complete many repetitive tasks during the development process. Using gulpcan greatly improve our development efficiency.

• ## Purpose
  We want to use in our front-end project gulpto achieve:

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

• ##Install

  ###Step 1: Download and install Node

  ######1. Visit http://nodejs.org to download the installation package under the corresponding system, install Node.jsand npmprogram management package.

  ######2. Make sure the Node.jsinstallation is correct.

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

  ######3. Make sure the npminstallation is correct.

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

  ###Step 2: Install Gulp

  ######1, install on the global environmentgulp

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

  ###Step 3: Configure projects that need to be automatically built by Gulp

  ######1. Create a new project that needs to be built gulpautomatically , and enter the root directory of the project.

  cd ~/Develop/gx-cms
  

  ######2. Initialize the node plugin management configuration file in this directory.

  npm init
  

  ######3, local installationgulp

  npm install gulp --save-dev
  

  ######4, install the gulpcomponents

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

  ###Step 4: Run Gulp

  ######1. Create a gulpfile.jstask running file, the format is as follows

  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() {
//- Read the rev-manifest.json file and the file that needs to be replaced by the css name gulp.src(['./rev/*.json', './application /**/header.php']) .pipe(revCollector()) //- Execute the replacement of the css name in the file.pipe(gulp.dest('./application/')); //- The replaced file output directory});

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

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

gulp // Execute the gulp command in the project and directory