简介
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤等功能。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更高效地完成构建工作。
主要方法
gulp.task():定义gulp的任务;
gulp.src():取得文件并转换成流;
gulp.watch():监视文件的变化,然后执行某些任务和操作;
gulp.dest():输出文件。
个人配置
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var babel = require('gulp-babel');
gulp.task('sass', function () {
gulp.src('./project/assets/sass/**/*.scss').pipe(plumber()).pipe(sass()).pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
})).pipe(gulp.dest('./project/assets/css'));
});
gulp.task('es6', function () {
gulp.src('./project/assets/es6/**/*.js').pipe(plumber()).pipe(babel({
presets: ['es2015']
})).pipe(gulp.dest('./project/assets/js'))
});
gulp.task('serve', ['sass'], function () {
browserSync({
server: {
baseDir: "project"
}
});
gulp.watch("assets/sass/**/*.scss", {
cwd: 'project'
}, ['sass']);
gulp.watch("assets/es6/**/*.js", {
cwd: 'project'
}, ['es6']);
gulp.watch(["**/*.html", 'assets/css/**/*.css', 'assets/js/**/*.js'], {
cwd: 'project'
}, browserSync.reload);
})
gulp.task('default', ['serve']);