gulp的常用配置
2019-08-16 本文已影响0人
千茉紫依
'use strict';
// 载入Gulp模块
var gulp = require('gulp');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');//兼容浏览器
var cssnano = require('gulp-cssnano');
var browserSync = require('browser-sync');//热刷新服务器
var reload = browserSync.reload;
// LESS编译 压缩
gulp.task('less', function() {
gulp.src(['src/css/*.less', '!src/css/_*.less'])
//less中使用@import url('_a.less')
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(reload({
stream: true
}));
});
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var babel=require('gulp-babel')
var browserify=require('gulp-browserify')
// JS合并 压缩混淆
gulp.task('js', function() {
gulp.src('src/js/*.js')
.pipe(concat('app.js'))
.pipe(babel()) //使用es6,加此项
.pipe(browserify({ //浏览器中兼容require等,使用async时使用
insertGlobals: true
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(reload({
stream: true
}));
});
// 图片复制
gulp.task('pic', function() {
gulp.src('src/pic/*.*')
.pipe(gulp.dest('dist/pic'))
.pipe(reload({
stream: true
}));
})
var htmlmin = require('gulp-htmlmin');
// HTML
gulp.task('html', function() {
gulp.src('src/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
}))
.pipe(gulp.dest('dist'))
.pipe(reload({
stream: true
}));
});
gulp.task('serve', ['less', 'js', 'pic', 'html'], function() {
browserSync({
notify: false,
port: 3003,
server: {
baseDir: ['dist']
}
},function (err, bs) {
console.log(bs.options.getIn(["urls", "local"]));
});
gulp.watch('src/css/*.less', ['less']);
gulp.watch('src/js/*.js', ['js']);
gulp.watch('src/pic/*.*', ['pic']);
gulp.watch('src/*.html', ['html']);
});
gulp.task('default',['serve']);