概述最近前端很火，前端技术栈也随着nodejs的出现而日新月异，引起了大多数前端-最终开发人员感到困惑。在各种技术选型方面，比如前端自动化工具，有Grunt、Gulp、Webpack、Fis3等各种方案，也有很多专家对其优缺点的深入分析和见解。相信很多人都和作者一样。想要跟上潮流的步伐却又停下脚步，因为随性的花朵越来越吸引眼球。无奈，作者固执。纠结了多次拾起又放下，终于找到了一些灵??感和启发，能够驾驭一两个。话不多说，今天的主题是：使用Gulp为传统项目打造前端工作流。可能很多开发者和我一样，还在服务于传统的MVC架构项目。这些项目的特点是HTML页面由后台渲染，前端工程师和后端工程师和睦相处（si）和（bi）在一个项目中，前端开发简单易行，拼页面，写文章特殊效果，并可能使用后端语法渲染数据。那么问题来了，想用sass或者less怎么办？如果我想写ES6怎么办？js文件太大需要压缩怎么办？现在，这些问题都将迎刃而解。Gulpgulp是nodejs的一个扩展库，是一个自动化构建工具。它的优点是有丰富的插件。借助插件，我们可以实现sass编译、ES6转ES5等各种前端任务。API不多，只有几个简单的功能，官方有简单友好的中文和文档。gulp快速入门gulpAPI文档编译Sassssass是一个css预处理器，它有很多很棒的特性，比如支持变量，支持文件导入，支持样式的嵌套继承等等，可以大大提高我们的css编写效率。Sass依赖于ruby环境。如果单独安装sass，会出现比较麻烦的环境部署问题。好在gulp有gulp-sass插件可以帮助我们转换，省去安装ruby的繁琐工作。下面是作者的sass编译任务//gulppluginvargulp=require('gulp'),sass=require('gulp-sass');...//sasscompilegulp.task('sass',function(){returngulp.src('/**/*.scss').pipe(sass())//编译sass.pipe(gulp.dest('/build/css'))//编译文件存放目录});是不是很简单，当然我们也可以顺便做一个css压缩，自动添加浏览器前缀功能，开发时需要实时编译，所以我们加一个监控插件gulp-watch，完整的css处理任务如下：安装所有gulp插件npminstall--save-devgulpgulp-sassgulp-autoprefixergulp-cssnanogulp-renamegulp-watchwritegulpfile.jsfile//gulppluginvargulp=require('gulp'),sass=require('gulp-sass'),autoprefixer=require('gulp-autoprefixer'),cssnano=require('gulp-cssnano'),//csscompressionrename=require('gulp-rename'),watch=require('gulp-watch');...gulp.task('sass',function(){returngulp.src(sasspath).pipe(watch(sasspath))//监听gulp.watch无法监听新文件.pipe(sass())//编译sass.pipe(autoprefixer())//添加浏览器前缀.pipe(gulp.dest(disCssPath)).pipe(cssnano()).pipe(rename({suffix:'.min'}))//重命名压缩文件名.pipe(gulp.dest(disCssPath));});Execute命令行上的gulp命令。gulpsass任务完成后，可以在目标目录下看到编译后生成的压缩和解压样式文件├──css│├──index.css│├──index.min.css│├──test。css│└──test.min.css实时编译示例：ES6->ES5ES6指的是ECMAScript6，又称ECMAScript2015，是JavaScript语言的新一代标准，于2015年6月正式发布。目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为一种企业级的开发语言。他提出了许多现代编程语言的许多新特性，包括变量、数组、函数、对象等，并得到了扩展。作者还在学习中，推荐一本阮一峰写的ES6电子书。ECMAScript6介绍当然，目前浏览器对ES6的支持还不完善，所以不能直接交给浏览器分析。那么新的问题来了，我们需要转码。Babel是一种广泛使用的ES6转码器，可以将ES6代码转换为ES5代码，以便在现有环境中执行。这意味着你可以用ES6的方式编写程序，而不用担心现有环境是否支持它。上面的电子书详细介绍了如何安装和使用babel进行转码，今天还是先不说。Gulp有相应的插件来解决，那就是gulp-babel。同样的，我们也可以顺便使用gulp-uglify压缩编译后的js文件，事情还是可以优雅的解决：安装babel和对应的转码规则扩展组件npminstall--save-devgulp-babelbabel-preset-es2015babel-preset-stage-3modifygulpfile.js...varbabel=require('gulp-babel'),uglify=require('gulp-uglify');...//编译jsgulp.task('js',function(){returngulp.src(jspath).pipe(watch(jspath)).pipe(babel({presets:['es2015','stage-3']}))//babeltranscoding.pipe(gulp.dest(disJsPath)).pipe(uglify())//压缩.pipe(rename({suffix:'.min'})).pipe(gulp.dest(disJsPath));});同理，gulpjs任务完成后执行相应的gulp命令目标目录下会添加编译好的js文件└──js├──index.js└──index.min.js实时编译示例：以上demo代码只是部分，并不完整，仅供参考，如果想快速的可以下载本文对应的源码用于自己的项目中。欢迎点击星标。作者会陆续加入图片压缩、精灵图片处理等新功能。感谢您的关注！gulp-work-flow前端工作流原来可以这么简单中秋佳节来临之际，祝大家节日快乐！
