web前端開發必備利器之gulp
web前端開發作為程序員崗位之中的一種，到2017年已經越來越火了，與此同時，以JavaScript為代表的編程語言推動著前端的發展，新工具不斷湧現，今天來講的是gulp，這個是前端開發人員必須學會的利器。
gulp有以下特點：
gulp是基於Nodejs的自動任務運行器
針對javascript/coffee/sass/less/html/image/css 等文件
自動化完成檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成
監聽文件在改動後重復指定的這些步驟
下面做個測試，新建文件如下：
測試文件
在package.json中：
有很多可選的有意思的組件
可選gulp組件
var htmlmin = require('gulp-htmlmin');//壓縮html,可以壓縮頁面js、css
var imagemin = require('gulp-imagemin');//壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片）
var minifycss = require('gulp-minify-css');//壓縮css文件,並給引用url添加版本號避免緩存
var revappend = require('gulp-rev-append');//給頁面的引用添加版本號，清除頁面引用緩存
var spritesmith = require('gulp.spritesmith');//生成sprites圖片和樣式表
var less = require('gulp-less');//編譯Less
var csslint = require('gulp-csslint');//檢查css有無報錯或警告
var babel = require('gulp-babel');//轉換代碼為ES6最新語法形式
可選POSTCSS組件
var bem = require('postcss-bem');
var cssNext = require('postcss-cssnext');
var px2rem = require('postcss-px2rem');//px轉換成rem
var autoprefixer = require('autoprefixer-core');
var postcssSimpleVars = require("postcss-simple-vars");
var postcssMixins = require("postcss-mixins");
var postcssNested = require("postcss-nested");
var sourcemaps = require("gulp-sourcemaps");
使用瀏覽器自動刷新功能
var webserver =require('gulp-webserver');
gulp.task('webserver',function(){
gulp.src('./')
.pipe(webserver({
host:'localhost',
port:8080,
path:'./src',
livereload:true, //自動刷新
directoryListing:{
enable: true,
path:'./'
},
}));
});
還有很多的gulp功能，大家可以嘗試！