Gulp 前端优化

使用方法：

1. 1. 下载 node.js ， https://nodejs.org/en/，并安装 msi
      1. 一下命令都属于 dos 命令
      2. node -v，npm -v，检验是否下载成功（出现版本号）
   2. 将 npm 镜像到淘宝 npm install cnpm -g --registry=https://registry.npm.taobao.org
      1. 然后用 cnpm 代替 npm使用
         1. 原因是 npm 是国外服务器
   3. 安装 gulp 到全局 cnpm install gulp -g
      1. 检验安装 gulp -v
      2. 切换到 文件项目目录下，cnpm install gulp --save-dev
   4. 安装插件：插件很多，
      1. cnpm install gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
   5. 在项目根目录创建gulpfile.js文件
   6. 
      

      var gulp = require('gulp');
      gulp.task('default', function() {
        console.log('hello world');
      });

      
      
      运行gulp,检验 ， 使用数组的方式来匹配多种文件, 可以用正则和!,

　具体代码

// 引入 gulp及组件
var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),        //压缩css
    //jshint = require('gulp-jshint'),            //js代码校验
    uglify = require('gulp-uglify'),            //压缩JS
    imagemin = require('gulp-imagemin'),        //压缩图片
    rename = require('gulp-rename'),            //合并js文件
   // concat = require('gulp-concat'),        // 将多个文件合并为1个    
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');
    
    
// Styles
gulp.task('styles', function() {
  return gulp.src('src/styles/**/**/**/**/**/**/**/**/**/*.css')
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/styles'))
        .pipe(notify({ message: 'Styles task complete' }));
});


// Scripts
gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/**/**/**/**/**/**/**/*.js')
    //.pipe(jshint('.jshintrc'))
   // .pipe(jshint.reporter('default'))
  //  .pipe(concat('main.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});


// Images
gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});


// Clean  任务执行前，先清除之前生成的文件
gulp.task('clean', function(cb) {
    del(['dist/**/**/**/**/**/**/*'], cb)
});


// Default task  设置默认任务
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});


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