gulp常用插件

var gulp = require('gulp'), //  手动引入模块（可以详细的看到引入了那些模块）
    less = require('gulp-less'), //  less文件编译成css 
    cleanCSS = require('gulp-clean-css'),//- 压缩CSS为一行；
    concat   = require('gulp-concat'),//- 多个文件合并为一个；
    babel = require('gulp-babel'), //  编译ES6/7等
    uglify = require('gulp-uglify'), //  压缩js
    imagemin = require('gulp-imagemin'),//图片处理
    browserSync = require('browser-sync').create(), //  实时加载(开启服务) 保证多个浏览器或设备网页同步显示 (recipes)
    connect = require('gulp-connect'), //  开启服务（另一种方法）
    autoprefixer = require('gulp-autoprefixer'), //  css 加前缀
    fileinclude = require('gulp-file-include'), //引入包含html
    clearnHtml = require("gulp-cleanhtml"), //  清洁html（删除不需要的空格，换行符等...）
    proxy = require('http-proxy-middleware'), //http代理
    base64 = require('gulp-base64'), //转base64
    reload = browserSync.reload;


// 定义源代码的目录和编译压缩后的目录
var src = 'src',
    dist = 'dist';

//实时编译less  
gulp.task('css', function () {  
    gulp.src([src + '/css/*.less']) //多个文件以数组形式传入  
        .pipe(less())
        .pipe(autoprefixer('last 10 versions', 'ie 9'))
        .pipe(base64({
            maxImageSize: 8*1024,  //小于8k的图转为base64
        }))  
        .pipe(concat('main.css'))   
        .pipe(cleanCSS())  
        .pipe(gulp.dest(dist + '/css'))
        .pipe(connect.reload());
          
});

// 压缩全部image
gulp.task('image', function() {
    gulp.src([src + '/**/*.{jpg,png,gif,ico}'])
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest(dist))
        .pipe(connect.reload());
});


// 复制js文件夹到指定目录
gulp.task('copy',  function() {
    return gulp.src(src + '/js/lib/*.js', {base: 'src'}) //保存目录结构
      .pipe(gulp.dest('dist'))
});

// 编译js 转es5 并压缩
gulp.task('js', function() {
    gulp.src(src + '/js/app/*.js', {base: 'src'})
        .pipe(babel({
            presets: ['es2015']
        }))
        // .pipe(uglify())
        .pipe(gulp.dest(dist))
        .pipe(connect.reload());
});

// 压缩全部html
gulp.task('html', function() {
    gulp.src(src + '/**/*.html')
        // .pipe(clearnHtml())
        .pipe(gulp.dest(dist))
        .pipe(connect.reload());
});

gulp.task('fileinclude', function() {
    // 适配src中所有文件夹下的所有html，排除src下的include文件夹中html
    gulp.src(['src/**.html', '!src/include/**.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file', //引用文件路径
            indent: true //保留文件的缩进
        }))
        .pipe(gulp.dest(dist))
        .pipe(connect.reload());
});

// 自动刷新
gulp.task('watch', function() {
    connect.server({
        root: [dist],
        port: 8181,
        livereload: true,
        middleware: function(connect, opt) {
            return [
                proxy('/user',  {
                    target: 'http://192.168.4.124:7200/',
                    changeOrigin:true,
                    pathRewrite: {
                        '^/user': '/user'
                    }
                }),
            ]
        }

    });

    // 监听less文件编译
    gulp.watch("src/**/*.less", ['css']);

    // 监听js文件变化后刷新页面
    gulp.watch(src + "/**/*.js", ['js']).on("change", reload);

    // 监听html文件变化后刷新页面
    gulp.watch("./src/*.html", ['html']).on("change", reload);

    //监听引入公共的html
    //gulp.watch('src/**/*.html', ['fileinclude']);

});



// 监听事件
gulp.task('default', ['copy', 'image', 'css', 'html', 'js', 'watch']);

//package.json
{
  "version": "1.0.0",
  "description": "gulp刷新以及反向代理",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "galan",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "browser-sync": "^2.14.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^6.1.2",
    "gulp-base64": "^0.1.3",
    "gulp-cleanhtml": "^1.0.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^5.6.1",
    "gulp-decomment": "^0.1.3",
    "gulp-file-include": "^1.2.0",
    "gulp-uglify": "^2.0.0"
  },
  "dependencies": {
    "gulp-clean-css": "^3.10.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-less": "^3.5.0",
    "http-proxy-middleware": "^0.18.0"
  }
}