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, //删除