gulp环境配置

[Wscats]

常用模块演示

目录结构

代码如下

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    //minifyhtml = require('gulp-minify-html'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    //imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    del = require('del'),
    less = require('gulp-less');

gulp.task('less', function () {
    return gulp.src('less/bootstrap.less')
        .pipe(less())
        .pipe(gulp.dest('dist/style'));
});
gulp.task('minify', function() {
    return gulp.src(['js/*.js'])
        .pipe(concat('main.js')) //合并所有js到main.js
        .pipe(rename({
            suffix: '.min'
        })) //rename压缩后的文件名 让main.js变成main.min.js
        .pipe(uglify()) //执行压缩
        .pipe(gulp.dest('./dist/js'))
});
gulp.task('minifycss', function() {
    return gulp.src('./style/*.css') //压缩的文件
        .pipe(concat('main.css')) //合并所有js到main.js
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('./dist/style')); //输出文件夹
});

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

gulp.task('default', ['minify', 'minifycss', 'less', 'imagemin']);

[Wscats]

监听JS变化，有JS变化就执行压缩JS的任务
gulp.watch('./script/*.js', ['minify']);

浏览器自动刷新

可以利用browserSync模块来达到监听文件变化并自动刷新浏览器的任务

var gulp = require("gulp");
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var babel = require('gulp-babel');
var jade = require('gulp-jade');
//定义任务 sass任务
gulp.task("sass", function() {
	//导入文件
	gulp.src("project/sass/*.scss")
		//转代码
		.pipe(sass().on('error', sass.logError))
		//导出文件
		.pipe(gulp.dest("project/dist"))
})
//压缩JS和es6转化的任务
gulp.task("minifyjs", function() {
	//导入文件
	gulp.src("project/js/*.js")
		//转代码
		.pipe(babel({
			presets: ['env']
		}))
		.pipe(uglify())
		//执行插件
		//.pipe(rename("goodbye.md"))
		//导出文件
		.pipe(gulp.dest("project/dist"))
})

var browserSync = require('browser-sync');
gulp.task('myserver', () => {
	// 开启服务器
	browserSync({
		server: './project/dist',
		// 代理服务器
		//proxy:'http://localhost:10086',
		// 端口
		port: 10087,
		files: ['./project/sass/*.scss', './project/js/*.js']
	});

	// 监听sass文件修改
	gulp.watch('project/sass/*.scss', ['sass']);
	gulp.watch('project/js/*.js', ['minifyjs']);
});

//gulp命令时候 敲命令时候触发任务
gulp.task("default", ['sass', 'minifyjs', 'myserver']);

[Wscats]

ES6转换

首先安装gulp-babel

npm install --save-dev gulp-babel babel-core babel-preset-env

const babel = require('gulp-babel');
gulp.task('toes5', () =>
	gulp.src('./js/test.js')
	.pipe(babel({
		presets: ['env']
	}))
	.pipe(gulp.dest('./js/es5'))
);