使用Glup.JS优化JS、CSS、图片，压缩合并

下面进入正题，简单说一下如何安装，使用gulp

1. 安装Gulp

gulp的任务处理机制是，未来源档案看成输入，经过Node.js的Stream操做流，并将流导向gulp的任务处理插件plugins，处理完成后将结果输出到指定输出目录。

从gulp的任务处理机制能够看出，gulp至关于一个任务管理器，而实际的业务处理是由其插件完成的。所以，gulp的安装也包括：安装gulp和安装gulp任务插件两部分。

1.1 安装Gulp

安装gulp，你能够选择全局安装或安装在项目的dev开发环境下。

全局安装gulp：

 

npm install gulp -g

 

在项目的dev开发环境中安装：

 

 

npm install gulp --save-dev

1.2 安装Gulp插件在开发环境安装后，会在项目package.json文件的devDependencies节点下保存。建议对gulp使用全局安装，这样能够在全部项目中使用。全局安装对于非Node.js项目尤其适用。

gulp插件的安装，也可使用全局安装或安装在dev开发环境，本站比较推荐使用全局安装。gulp插件能够按需安装，若是你只须要处理CSS，那么只安装CSS相关处理插件便可。gulp的全部插件请参考：Gulp插件。对于CSS文件处理、JS文件处理、图片处理，你可能须要如下插件：

gulp-ruby-sass：基于ruby和sass的Sass文件编译，可将Sass文件为CSS文件

gulp-autoprefixer：Autoprefixer，能够解析CSS文件，而且添加浏览器前缀到CSS规则里

gulp-minify-css：CSS文件压缩工具

gulp-jshint：JSHint，一个JS代码检查工具，能够检测JavaScript中错误和潜在问题

gulp-uglify：uglify，JS代码优化工具，可用于压缩和美化（或者叫“丑化”）javascript代码

gulp-concat：文件拼接工具，可用于多个CSS文件或多个JS文件的合并

gulp-imagemin：imagemin，图片压缩工具

通常来讲上面介绍的插件能够知足通常前端资源的处理，好比：less和sass文件的编译、CSS文件的合并压缩、JS文件的合并压缩、图片的压缩。在平常工做中，你可能还须要一些处理，像执行gulp任务前清理目录、服务端资源的监控、只针对变动资源的处理等，下面的一些插件可能会用到：

gulp-clean：目标目录清理，在用于gulp任务执行前清空目标目录

gulp-cache：资源缓存处理，可用于缓存已压缩过的资源，如：图片

gulp-notify：任务通知工具，可用于某项任务执行完成的在控制台输出通知

gulp-livereload：服务器资源监控，当服务端资源变化时对页面进行刷新。须要要配合浏览器插件使用或在页面这样处理，使用比较复杂，非必要时不推荐使用

在dev开发环境下安装这些插件：

 

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

2.1 gulp一些经常使用的API2. 使用Gulp

要深刻了解gulp，建议查看其官方文档。对于通常使用gulp，了解下面几个API，便可知足平常需求：

gulp.task()：方法用来定义任务，内部使用的是Orchestrator

gulp.src()：gulp是基于Node.js的流进行任务转接及处理的，gulp.src()用于引入流，即：读取要操做的文件。能够是下面几种：

/public/js/index.js：指定的一个文件

/public/js/*.js：某个目录下的全部文件

/public/**/*.js：目录下及其全部子目录下的全部js文件

!/public/js/main.js：某个目录下，除main.js之外的全部js文件

*.+(js|css);正则表达式匹配根目录下扩展名是js和css的全部文件

gulp.dest()：在指定路径输出文件。只能对其指定路径，而不能对输出文件重命名，重命名可使用插件gulp-rename

gulp.watch()：监视文件的变化（如：CSS、JS、图片），当文件发生变化后，咱们能够利用它来执行相应的任务

2.2 gulp使用示例

以expressWeb框架为例

在全局安装gulp及相关插件后，建立gulpfile.js文件（在本例中，文件在项目根目录下）。gulpfile.js文件内容以下

 

在项目根目录下，执行命令：执行gulp命令前，public目录结构是下面这样的：

var gulp = require('gulp'),  
  //  sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
 
// 样式处理任务
gulp.task('styles', function() {  
  return gulp.src('public/stylesheets/*.css')    //引入全部CSS
    .pipe(concat('main.css'))           //合并CSS文件
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('public/dist/css'))      //完整版输出
    .pipe(rename({ suffix: '.min' }))   //重命名
    .pipe(minifycss())                  //CSS压缩
    .pipe(gulp.dest('public/dist/css'))      //压缩版输出
    .pipe(notify({ message: '样式文件处理完成' }));
});
 
// 若是须要经过scss文件编译css，就使用这段代码
// gulp.task('styles', function() {  
//   return gulp.src('public/html/css/main.scss')
//     .pipe(sass({ style: 'expanded', }))
//     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//     .pipe(gulp.dest('public/dist/styles'))
//     .pipe(rename({ suffix: '.min' }))
//     .pipe(minifycss())
//     .pipe(gulp.dest('public/dist/styles'))
//     .pipe(notify({ message: 'Styles task complete' }));
// });
 
// JS处理任务
gulp.task('scripts', function() {  
  return gulp.src('public/javascripts/*.js')      //引入全部需处理的JS
    .pipe(jshint.reporter('default'))         //S代码检查
    .pipe(concat('main.js'))                  //合并输出的JS文件名称
    .pipe(gulp.dest('public/dist/js'))        //完整版输出路径
    .pipe(rename({ suffix: '.min' }))         //重命名
    .pipe(uglify())                           //压缩JS
    .pipe(gulp.dest('public/dist/js'))        //压缩版输出路径
    .pipe(notify({ message: 'JS文件处理完成' }));
});
 
// 图片处理任务
gulp.task('images', function() {  
  return gulp.src('public/images/*')        //引入全部需处理的JS
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))      //压缩图片
    // 若是想对变更过的文件进行压缩，则使用下面一句代码
    // .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 
    .pipe(gulp.dest('public/dist/img'))
    .pipe(notify({ message: '图片处理完成' }));
});
 
// 目标目录清理
gulp.task('clean', function() {  
  return gulp.src(['public/dist/css', 'public/js', 'public/img'], {read: false})
    .pipe(clean());
});
 
// 预设任务，执行清理后，
gulp.task('default', ['clean'], function() {  
    gulp.start('styles', 'scripts', 'images');
});
 
// 文档临听
gulp.task('watch', function() {
 
//  // 监听全部.scss文档
//   gulp.watch('src/styles/**/*.scss', ['styles']);
 
    // 监听全部css文档
    gulp.watch('public/html/css/*.css', ['styles']);
 
    // 监听全部.js档
    gulp.watch('public/html/js/*.js', ['scripts']);
 
    // 监听全部图片档
    gulp.watch('public/html/img/*', ['images']);
 
//   // 建立实时调整服务器 -- 在项目中未使用注释掉
//   var server = livereload();
//   // 监听 dist/ 目录下全部文档，有更新时强制浏览器刷新（须要浏览器插件配合或按前文介绍在页面增长JS监听代码）
//   gulp.watch(['public/dist/**']).on('change', function(file) {
//     server.changed(file.path);
//   });
 
});

 

gulp

执行gulp命令后，public目录结构是下面这样的：

gulp操做成功，文件被输出到了publi/dist目录下，CSS和JS文件都有完整版和压缩版两个，

图片也通过了压缩处理。若是须要进行其它处理，可自行修改gulpfile.js文件代码。