gulp常用配置


由于项目中经常会使用到gulp,而每次配置大概都差不多,所以将配置记录一下

项目结构

├─dist
│  ├─assets
│  ├─css
│  ├─images
│  └─js
├─node_modules
└─src
  ├─assets
  │  ├─css
  │  ├─echarts
  │  ├─js
  │  ├─odometer
  │  └─插件等
  ├─less
  ├─images
  └─js

配置文件 gulpfile.js

/*
 * @gulp:自动化任务
 */
var gulp = require('gulp');
var rm = require('del'); //删除文件
var browserSync = require('browser-sync');
var reload = browserSync.reload; //自动刷新
var htmlmin = require('gulp-htmlmin'); //压缩html
var miniCSS = require('gulp-clean-css'); //压缩css
var miniJS = require('gulp-uglify'); //压缩js
var less = require('gulp-less'); //编译less
var autoprefixer = require('gulp-autoprefixer'); // 补全浏览器前缀 
var babel = require('gulp-babel'); // es6 转 es5
var replace = require('gulp-replace'); // 替换
var proxyMiddleware = require('http-proxy-middleware'); // 代理跨域

/**
 * 配置
 */
var config = {
    path: {
        src: './src/', // 工程目录
        dist: './dist/' // 产出目录 
    },

    // 代理设置
    middleware: proxyMiddleware('/api', {
        target: 'http://192.168.1.108:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        },
    })
};


/*清除产出目录*/
gulp.task('clear-dir', (done) => {
    rm.sync([config.path.dist + '**']);
    done();
});

/*图片产出*/
gulp.task('img', function () {
    return gulp.src(config.path.src + 'images/**/*')
        .pipe(gulp.dest(config.path.dist + 'images/'))
});

/**静态文件(不需要编译) */
gulp.task('assets', function () {
    return gulp.src(config.path.src + 'assets/**/*')
        .pipe(gulp.dest(config.path.dist + 'assets/'))
});


/**html处理 */
gulp.task('mini-html', function () {
    return gulp.src(config.path.src + '**.html')
        // 修改为源文件 
        //  .pipe(replace('src="./script/', 'src="./js/'))
        .pipe(htmlmin({
            collapseBooleanAttributes: true, //省略布尔属性的值  ==> 
            removeEmptyAttributes: true, //删除所有空格作属性值  ==> 
            removeScriptTypeAttributes: true, //删除