gulp开发：gulp入门

Gulp构建前端自动化工作流

Gulp构建前端自动化工作流之：常用插件介绍及使用

在对Gulp有了一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。

本文主要分为6个段落：

• 1. 构建项目目录结构（Directory Structure Build）
• 2. 插件介绍及使用方法（Tasks and dependencies）
• 3. 扩展优化（Extend & Optimize Task）
• 4. 其他插件介绍（Other plug-ins）
• 5. 匹配规则（Match Files）
• 6. 注意事项（Attention）

关于Gulp的入门介绍及安装方法，可先去《Gulp构建前端自动化工作流之：入门介绍及LiveReload的使用》 这篇文章查看。对其有个初步认识后，便于后文的理解。

1. 构建项目目录结构（Directory Structure Build）

+ my-gulp（项目文件夹）
  + node_modules Gulp组件目录
  + dist 发布环境
  + css 编译后的CSS文件
    ─ etc...
  + images 压缩后的图片文件
    ─ etc...
  + js 编译后的JS文件
    ─ etc...
　　─ html 静态文件
  + src 开发环境
  + sass SASS文件
    ─ etc...
  + images 图片文件
    ─ etc...
  + js JS文件
    ─ etc...
  ─ html 静态文件
  ─ gulpfile.js Gulp任务文件

注：
+ 表示目录  ─ 表示文件

2. 插件介绍及使用方法（Tasks and dependencies）

2.1 HTML处理（HTML Task）

仅把开发环境中的HTML文件，移动至发布环境。

基础配置：

gulp.task('html', function() {
  return gulp.src('src/**/*.html') // 指明源文件路径、并进行文件匹配
    .pipe('dist'); // 输出路径
});

执行命令： gulp html

2.2 样式处理（CSS Task）

CSS预处理/Sass编译 (gulp-ruby-sass) ：

相比较glup-sass而言，速度会稍许慢点，但功能更多并且稳定。

安装SASS：

1. 像Gulp基于Node.js一样，Sass基于Ruby环境，所以我们先去官网下载并安装Ruby（在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境）。
2. 安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
3. 然后直接在命令行中输入gem install sass按回车键确认，等待一段时间就会提示你sass安装成功。

注： 由于近期墙的比较严重，外加（上海）电信限制了外网访问速度。如果安装失败，请使用淘宝的Ruby镜像。具体操作方法请参考淘宝RubyGems镜像安装 sass。

安装命令： npm install gulp-ruby-sass --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var sass = require('gulp-ruby-sass'); // sass/scss编译

gulp.task('sass', function () {
     return sass('src/css', { style: 'compressed' }) // 指明源文件路径、并进行文件匹配（style: 'compressed' 表示输出格式）
          .on('error', function (err) {
               console.error('Error!', err.message); // 显示错误信息
          })
          .pipe(gulp.dest('dist/css')); // 输出路径
});

执行命令： gulp sass

插件提供4种输出格式： nested：嵌套缩进的css代码，它是默认值。 expanded：没有缩进的、扩展的css代码。 compact：简洁格式的css代码。 compressed：压缩后的css代码。

注： 使用前清看清 gulp-ruby-sass 写法，不要直接拿 gulp-sass 的写法来套用，两者并不完全相同。

2.3 脚本压缩&重命名（Javascript Task）

JS文件压缩(gulp-uglify)：

使用uglify引擎压缩JS文件。

安装命令： npm install gulp-uglify --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var uglify = require('gulp-uglify'); // js压缩

gulp.task('script', function() {
  return gulp.src('src/js/*.js') // 指明源文件路径、并进行文件匹配
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
    .pipe(gulp.dest('dist/js')); // 输出路径
});

执行命令： gulp script

2.4 图片处理（Image Task）

图片压缩(gulp-imagemin) + 深度压缩(imagemin-pngquant)：

压缩PNG、JPEG、GIF和SVG图像。 gulp-imagemin集成了gifsicle 、jpegtran 、optipng 、svgo 这4个插件。而imagemin-pngquant是imagemin插件的一个扩展插件，用于深度压缩图片。

安装命令： npm install gulp-imagemin imagemin-pngquant --save-dev

基础配置：