前端工具系列之一 Gulp
从(大约)2014年开始,前端不再是当初那个切图排版的前端了，各种MV*框架、库、工具呈井喷之势层出不穷。构建工具比较有名的如Grunt、Gulp、Yeoman、webpack；依赖管理比如bower、npm，当然最流行最广为人知的还是作为Nodejs的管理器npm；模块化出现了CMD、AMD、UMD等，例如requirejs、seajs等的。
当然，许多技术、技术思维等出现的时代甚至可以追溯至上个世纪。但进入大众视线，并逐步投产的时代却为时尚早。
作为一个怕麻烦的懒人，对于前端的繁杂工作当然是要找一个自动化工具来处理，于是我遇到了Gulp。作为自动化工具，Gulp经常被拿来和Grunt比较，孰优孰劣不能一概而论，毕竟每个人关注的地方也不一样。关于Gulp与Grunt的对比，网络上有许多总结好的特点，有兴趣的可以去搜索查看阅读，我在这里就不凑字数了。
要使用Gulp，首先要做的第一步当然是要安装她啦！Gulp是基于NodeJs的一个自动化构建工具，既然是基于NodeJs了，那么安装Gulp之前自然要保证你已经安装了NodeJS，这里我会从安装NodeJS开始。
我这里使用Ubuntu 16.04 LTS版本作为主机环境，其他版本的请自行注意差异。Windows相对Ubuntu来说就更简单了，相信难不到大家。
首先我们来安装NodeJS。Ubuntu下安装Linux有两种方案，一是采用APT安装，但此办法并没有自动安装NPM，需要手动安装；第二种方案则是下载Nodejs源码，自行编译安装。这里采用懒省事的办法——APT。
sudo apt-get install nodejs-legacy npm回车之后，输入密码，APT就会自动帮你把Nodejs、npm安装好了。当安装过程结束后回到命令指引时候，可以输入nodejs -v 和 npm -v 来检查安装结果。
注意：Ubutun中，NodeJS的包名有两个nodejs和nodejs-legacy,而不是node。
如果一切顺利，安装Gulp的前置步骤已经完成了。接下来我们安装Gulp，Gulp是作为NodeJS的一个模块存在的，因此安装的时候要用到NPM。
sudo npm install -g gulp这一步结束之后，Gulp安装就结束了。接下来就到了关键时刻啦，配置Gulp的task，Gulp虽然是自动化构建工具，但还是需要我们来给她指定task，让她安装我们指定的task来工作，她还没聪明到猜测我们要做什么、怎么做。
Gulp的API较之Grunt少的多，仅仅只有4个。
gulp.src(globs[, options])gulp.dest(path[, options])gulp.task(name [, deps] [, fn])gulp.watch(glob [, opts], tasks) || gulp.watch(glob [, opts, cb])依靠这4个API和众多的Gulp 插件，我们就能实现许多我们需要的功能。在编写Gulp任务之前，我们首先要在当前目录安装Gulp。
sudo npm install --save-dev gulp一切准备工作已经就绪，下面我们就进入主题，我们就来写一个简单的Gulp任务文件。
在当前目录创建一个空的文件，名字叫做gulpfile.js。
var gulp = require('gulp');gulp.task('default', function(){ console.log("task default done"); });将以上代码保存在gulpfile.js里。然后在命令行终端里进入当前目录,在命令行终端里输入gulp。gulp会自动查找当前目录中的gulpfile.js,然后分析gulpfile中的任务列表，命令行中如果没参数，则默认执行 default 任务，如果指定，则执行指定的任务。
正常情况下，将会在终端中看到
task default done这行输出，并且还有每个任务开始时间和结束时间。
以上就是一个简单的Gulp 任务，下面我会把我常用的配置发出来。我一般使用到的有几个功能。
SASS编译压缩
JS压缩
browerSync(改动文件自动刷新HTML和CSS、JS等)
gulpfile内容如下
var gulp = require('gulp'), uglify = require('gulp-uglify'), cssMinify = require("gulp-cssnano"), browserSync = require('browser-sync').create(), compass = require('gulp-compass'), paths = { scripts: ['js/*.js'], // JS文件路径 css: 'sass/*.scss', // scss 文件路径 };gulp.task('scripts', function() { return gulp.src(paths.scripts) // 读取JS文件 .pipe(uglify()) // 压缩 .pipe(gulp.dest('script/')) //将压缩后的文件保存到 script目录 .pipe(browserSync.stream()); // 通知browserSync 重载 JS文件});gulp.task("css", function() { return gulp.src(paths.css) // 读取SCSS文件 .pipe(compass({ sass: 'sass', image: 'images' })) // 进行编译处理 .pipe(cssMinify()) // 压缩CSS文件 .pipe(gulp.dest('css/')) // 发布到css 目录 .pipe(browserSync.stream()); // 通知browserSync刷新CSS文件});// 注册serve 任务，serve任务依赖scrips 和 css 两个任务gulp.task('serve', ['scripts', "css"], function() { // Serve files from the root of this project browserSync.init({ server: { baseDir: "./" } }); gulp.watch(paths.scripts, ["scripts"]); gulp.watch(paths.css, ["css"]); gulp.watch("*.html").on("change", browserSync.reload);});// The default task (called when you run `gulp` from cli)gulp.task('default', ['serve']); // 将serve 任务注册为默认任务。在这个任务清单中，需要依赖以下插件。
gulp-uglifygulp-cssnanobrowser-syncgulp-compass在使用中，直接进入到当前目录中，在终端中运行gulp,将会启动一个http服务，并且打开浏览器窗口。
服务启动后，无论你修改CSS、JS还是HTML，都会自动编译压缩并且自动刷新HTML(如果需要，修改CSS、JS是不需要刷新整个页面，只会重新加载CSS、JS)。
好了，乱七八糟的这个Gulp教程到这里算是马马虎虎的收尾了。其实Gulp 还是蛮强大的，还是有许多内容没提到的，Gulp的API、插件的API这些都没有去讲解，去看一下文档大家应该就明白了。
当然，这个配置还是有不足的，Gulp官方推荐的一些最佳实践都没应用到，甚至一些功能也没有完成，比如图片压缩、公用模板引用。
图片压缩可以去查看一下gulp-imagemin,公共模板引用gulp-content-includer。
关键字：node.js, JavaScript
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
