前端构建工具gulp安装（整理补充）

第1步：安装Node

首先，最基本也最重要的是，我们需要搭建node环境。访问 nodejs.org，然后点击大大的绿色的 install 按钮，下载完成后直接运行程序，就一切准备就绪。npm会随着安装包一起安装，稍后会用到它。

为了确保Node已经正确安装，我们执行几个简单的命令。

node -v
npm -v

如果这两行命令没有得到返回，可能node就没有安装正确，进行重装。

第2步：安装gulp

首先我们要全局安装一遍：

npm install -g gulp

运行时注意查看命令行有没有错误信息，安装完成后，你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

gulp -v

接着我们在项目的根目录手动添加一个package.js文件，在package.json文件里写如下的格式：

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {

  }
}

然后在cmd里进入到项目的根目录，输入如下命令

npm install gulp --save-dev

就会发现项目的根目录里面多了【node_modules】文件夹，里面增加了gulp的文件夹。同时package.json文件里的【devDependencies】里面多了一行关于gulp的版本号

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {
      "gulp": "^3.9.0" //新增一行gulp的版本号
  }
}

第3步：新建gulpfile.js文件

我们将要使用Gulp插件来完成我们以下任务：

• sass的编译（gulp-sass）
• 自动添加css前缀（gulp-autoprefixer）
• 压缩css（gulp-minify-css）
• 压缩html（gulp-minify-html）
• js代码校验（gulp-jshint）
• 合并js文件（gulp-concat）
• 压缩js代码（gulp-uglify）
• 压缩图片（gulp-imagemin）
• 自动刷新页面（gulp-livereload）
• 图片缓存，只有图片替换了才压缩（gulp-cache）
• 更改提醒（gulp-notify）

安装这些插件需要运行如下命令：

npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-minify-html jshint gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

补充：安装jshint报错解决方法：npm install –save-dev jshint gulp-jshint

更多插件可以看这里gulpjs.com/plugins/

【node_modules】文件夹，里面增加了n个插件文件夹。package.js文件里的【devDependencies】里面多了n行插件的版本号

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-cache": "^0.3.0",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^1.11.2",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.1",
    "gulp-minify-html": "^1.0.4",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.4.1"
  }
}

接着我们要创建一个gulpfile.js在根目录下，gulp只有四个API： task，watch，src，和 dest

【task】这个API用来创建任务，在命令行下可以输入 gulp test 来执行test的任务。
【watch】这个API用来监听任务。
【src】这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss,vender.scss]，也可以是正则表达式/**/*.scss。
【dest】这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

简单的项目目录结构

project(项目名称)

|–node_modules          组件目录
|–dist                  发布环境
    |–css               样式文件(style.css style.min.css)
    |–js                js文件(main.js main.min.js)
|–src 生产环境
    |–sass              sass文件
    |–js                js文件
|–gulpfile.js           gulp任务文件
|–package.json          依赖gulp模块

编写gulp任务

// 引入 gulp及组件
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    minifyhtml = require("gulp-minify-html"),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');


// Styles任务
gulp.task('styles', function() {
    //编译sass
    return gulp.src('src/css/*.scss')
        .pipe(sass())
        //保存未压缩文件到我们指定的目录下面
        .pipe(gulp.dest('src/css'))
        //给文件添加.min后缀
        .pipe(rename({ suffix: '.min' }))
        //压缩样式文件
        .pipe(minifycss())
        //输出压缩文件到指定目录
        .pipe(gulp.dest('dist/css'))
        //提醒任务完成
        .pipe(notify({ message: 'CSS task complete' }));
});

// Scripts任务
gulp.task('scripts', function() {
    //js代码校验
    return gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        //js代码合并
        //.pipe(concat('all.js'))
        //给文件添加.min后缀
        .pipe(rename({ suffix: '.min' }))
        //压缩脚本文件
        .pipe(uglify())
        //输出压缩文件到指定目录
        .pipe(gulp.dest('dist/js'))
        //提醒任务完成
        .pipe(notify({ message: 'JS task complete' }));
});

// Default task
gulp.task('default', function() {
    gulp.start('styles', 'scripts','watch');
});
// Watch
gulp.task('watch', function() {
    // Watch .scss files
    gulp.watch('src/css/*.scss', ['styles']);
    // Watch .js files
    gulp.watch('src/js/*.js', ['scripts']);
    // Create LiveReload server
    livereload.listen();
    // Watch any files in assets/, reload on change
    gulp.watch(['dist/*']).on('change', livereload.changed);
});

补充gulp插件

自动刷新

---

可以结合browser-sync做多终端自动刷新，详见BrowserSync前端测试利器

---

处理html

使用gulp-processhtml
安装：npm install –save-dev gulp-processhtml
在构建时处理按你设想的修改html文件，比如说你构建之前你有N个脚本需要引入到html页面中，构建之后可能这N个文件被合并成了一个，这时候引入的地方也需要做相应的调整，那么差个插件就能派上用场了。
插件使用

gulp.task("processhtml", function () {
    gulp.src('../main.html')
        .pipe(processhtml())
        .pipe(gulp.dest(option.buildPath + '/'))
})

main.html构建之前的代码

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<!-- build:js js/libs/libs.min.js --> <!--process-html插件需要用到这个注释-- >
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular.touch.min.js"></script>
<script src="js/libs/zepto.20140520.js"></script>
<script src="js/libs/angular.ui.bootstrap.js"></script>
<script src="js/libs/angular-sanitize.min.js"></script>
<script src="js/libs/angular-ui-route.min.js"></script>
<script src="js/libs/fastclick.0.6.7.min.js"></script>
<script src="js/libs/carous.min.js"></script>
<!-- /build --> <!--process-html插件需要用到这个注释-->
</html>

main.html构建之后

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/libs/libs.min.js"></script> <!--注意这里的变化-->
</html>

---

字符串替换（修改文件版本号）

使用gulp-replace
安装：npm install –save-dev gulp-replace
可以替换html或者txt等文件内的字符串为你想要的。
比如我每次构建的时候都需要去修改引用的文件的版本号，就可以使用这个插件

gulp.task("replace", function () {
    var date = new Date().getTime();
    gulp.src('../main.html')
        .pipe(replace(/_VERSION_/gi, date))
        .pipe(gulp.dest(option.buildPath + '/'))
})

main.html文件

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=_VERSION_"/>
    <link rel="stylesheet" href="style/index.css?v=_VERSION_"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=_VERSION_"></script>
<script src="js/app.js?v=_VERSION_"></script>
<script src="js/service/TrackDataService.js?v=_VERSION_"></script>
<script src="js/service/APIService.js?v=_VERSION_"></script>
<script src="js/service/DService.js?v=_VERSION_"></script>
<script src="js/controllers/indexCtrl.js?v=_VERSION_"></script>
<script src="js/directive/lazy.js?v=_VERSION_"></script>
<script src="js/directive/slider.js?v=_VERSION_"></script>
<script src="js/filter/filters.js?v=_VERSION_"></script>
</html>

构建之后，_VERSION_被替换为时间戳。

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=1433405631860"/>
    <link rel="stylesheet" href="style/index.css?v=1433405631860"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=1433405631860"></script>
<script src="js/app.js?v=1433405631860"></script>
<script src="js/service/TrackDataService.js?v=1433405631860"></script>
<script src="js/service/APIService.js?v=1433405631860"></script>
<script src="js/service/DService.js?v=1433405631860"></script>
<script src="js/controllers/indexCtrl.js?v=1433405631860"></script>
<script src="js/directive/lazy.js?v=1433405631860"></script>
<script src="js/directive/slider.js?v=1433405631860"></script>
<script src="js/filter/filters.js?v=1433405631860"></script>
</html>

---

使用 gulp.dest 复制目录结构

假设我们的目录结构是这样的
├── src/
│     └── vendor/
│            └── jquery.js
└── gulpfile.js

我们需要复制 jquery.js 到 dest 目录, 并保持 jquery.js 原有的目录层次结构

------------------------------

// 一般我们是这样复制文件的
gulp.src('./src/vendor/jquery.js')
    .pipe(gulp.dest('dest'));

但得到的结果不符合我们的预期, 只是单纯的 copy 了文件, 目录结构没有复制过来
├── src/
└── dest/
       └── jquery.js

// 当我们加上 base 参数后
gulp.src('./src/vendor/jquery.js', {base: '.'})
    .pipe(gulp.dest('dest'));

接近我们想要结果了, 连同目录结构都复制了过来
├── src/
└── dest/
       └── src/
              └── vendor/
                     └── jquery.js

// 我们可以再修改下 base 以去掉 src 这一层
gulp.src('./src/vendor/jquery.js', {base: './src'})
    .pipe(gulp.dest('dest'));

最终的结果
├── src/
└── dest/
       └── vendor/
              └── jquery.js