Gulp使用记录.md

当前node和gulp版本

当前版本下，gulp-minify-css已经被废弃，替换为gulp-clean-css，用法完全一致。要注意安装插件包时的提示。

deprecate gulp-minify-css@* Please use gulp-clean-css
deprecate gulp-minify-css@1.2.4 › gulp-util@^3.0.5 gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

前端构建工具挺多的，目前选择两种，分别是gulp和webpack，gulp相对于shell脚本，用来临时跑一些任务，比如压缩js、css、精灵图。webpack主要是提供一整套的前端解决方案。

---以下记录安装gulp，并实现js、css压缩配置。

安装gulp

首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

sudo npm install gulp -g
gulp -v #查看版本

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：（可以不执行）

npm install gulp --save-dev

安装所需模块

已经把gulp-minify-css替换为gulp-clean-css，执行以下安装命令，注意执行结果提示，按提示进行修证即可。

npm install gulp-ruby-sass gulp-autoprefixer gulp-clean-css gulp-jshint jshint@2.x gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev 

gulp使用

项目结构：

项目结构

gulpfile.js示例：

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('css/**/*.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('dist/css'))      //完整版输出
    // .pipe(rename({ suffix: '.min' }))   //重命名
    .pipe(minifycss())                  //CSS压缩
    .pipe(gulp.dest('dist/css'))      //压缩版输出
    .pipe(notify({ message: '样式文件处理完成' }));
});

// JS处理任务
gulp.task('scripts', function() {  
  return gulp.src('js/**/*.js')      //引入所有需处理的JS
    // .pipe(jshint.reporter('default'))         //S代码检查
    // .pipe(concat('main.js'))                  //合并JS文件
    .pipe(gulp.dest('dist/js'))        //完整版输出
    // .pipe(rename({ suffix: '.min' }))         //重命名
    // .pipe(uglify())
    .pipe(uglify({
            mangle: false//类型：Boolean 默认：true 是否修改变量名
            // mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆关键字
        }))
    .pipe(gulp.dest('dist/js'))        //压缩版输出
    .pipe(notify({ message: 'JS文件处理完成' }));
});

// 目标目录清理
gulp.task('clean', function() {  
  return gulp.src(['dist/css', 'dist/js'], {read: false})
    .pipe(clean());
});

// 预设任务，执行清理后，
gulp.task('default', ['clean'], function() {  
    gulp.start('styles', 'scripts');
});

参考：
官网：https://gulpjs.com/
https://itbilu.com/nodejs/npm/VJ4oWdjd.html
http://blog.csdn.net/songchunmin_/article/details/51690572

---

Smaller 1.4 前端文件压缩工具

推荐Mac上好用的前端文件压缩工具Smaller，临时拖一个文件进行压缩还是挺方便的(先收藏还没用，刚gulp异常找问题时发现的)。