前端构建工具—gulp

简介

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']);

文档结构：

参考文献

1. https://www.w3ctech.com/topic/134