Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：
搭建web服务器文件保存时自动重载浏览器
使用预处理器如Sass、LESS
优化资源，比如压缩CSS、JavaScript、压缩图片本文主要告知如何使用gulp编译sass和es6
安装node2.全局安装gulp打开终端，我使用的是Windows，以Windows为例， 打开cmd，输入以下命令
npm install gulp -g
（推荐使用全局安装国内镜像,从而减少下载时间）
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.进入指定目录（使用cd命令），并创建gulp项目cnpm init
局部安装gulp
(注意：以下命令中的所有save前为两横杠，且连在一起，没有空格）
cnpm install gulp - -save-dev
4.在gulp项目目录下创建gulpfile.js文件5.安装gulp-sass插件和gulp-plumber插件gulp-sass: 用于编译sass
gulp-plumer: 用于阻止gulp插件发生错误导致进程退出并输出错误日志。cnpm install gulp-sass - - save-dev
6.编辑gulpfile.js文件，创建并监听sass编译任务var gulp = require("gulp");var sass = require("gulp-sass");var plumber = require("gulp-plumber");// 监听sass// gulp.src() 为源文件路径// gulp.dest() 为输出文件名路径// {outputStyle: "expanded"} 指定sass编译格式gulp.task("sass", function() { return gulp.src("scss/*.scss") .pipe(plumber()) .pipe(sass({outputStyle: "expanded"}).on('error', sass.logError)) .pipe(gulp.dest("css"));});gulp.task("watch-sass", function() { gulp.watch("scss/*.scss", ["sass"]);});在终端输入
gulp watch-sass
安装gulp-babel插件和babel-preset-es2015插件cnpm install --save-dev gulp-babel babel-preset-es2015
8.编辑gulpfile.js文件，创建并监听es6编译任务var gulp = require("gulp");var babel = require("gulp-babel");// 创建es6任务gulp.task("es6", function() { return gulp.src("es6/*.js") .pipe(plumber()) .pipe(babel({ presets: ["es2015"] })) .pipe(gulp.dest("dist"));});// 监听es6任务gulp.task("watch-es6", function() { gulp.watch("es6/*.js", ["es6"]);});在终端输入
gulp watch-es6