我的Gulp前端工作流介紹

1、我的Gulp前端工作流介紹關于前端工作流，已經有tmt-flow珠玉在前,今天介紹一下在之前項目開發(fā)過程中自己總結的一套常用的流程工具, 工作流依靠Webstorm作為IDE，有些必須的功能（文件即時編譯）依賴IDE本身自帶功能，并沒有加到工作流中去。功能特性自動化流程Sass - CSSCSS Autoprefixer 前綴自動補全CSS 壓縮 cssnanoCSS Sprite 雪碧圖合成imagemin 圖片壓縮JS 合并壓縮Pug 模板語言調試&部署監(jiān)聽文件變動，自動刷新瀏覽器 (LiveReload)項目目錄結構Projectgulpfile.js/工作流配置文件package.js

2、ondist/output目錄，工作流生成的所有文件index.htmlcssall.css/合并后的cssimagessprite.png/合并后的雪碧圖iconsjscommon.js/壓縮后的腳本文件dookay.min.js/整合后的引用腳本tempnode_moduales/gulp包存放目錄src/源文件目錄index.html/IDE設置模板自動生成后的首頁index.pug/未編譯的pug模板文件bootstrap/引用bootstrap庫，包含插件以及SCSS源文件javascriptsbootstrap.jsbootstrapstylesheetsbootstrap.scs

3、sbootstrapmixinscss/存放scss源文件，插件樣式，bootstrap生成樣式，雪碧圖sprite源scss文件bootstrap.cssjquery.bxslider.cssmain.cssmain.scss_sprite.scssimagesimagesiconsjscommon.js/自己的jsjquery-2.2.4.min.js/引用的jspugs/pug模板源文件存放目錄footer.pugheader.puglayout.pugtemp/存放臨時圖片配置文件 Gulpfile.jsusestrict;/requiregulpvargulp=require(gul

4、p);varpath=require(path);/gulpcorevarconnect=require(gulp-connect);varpug=require(gulp-pug);varsass=require(gulp-sass);varimagemin=require(gulp-imagemin);varspritesmith=require(gulp.spritesmith);/gulpsupportvarconcat=require(gulp-concat);varrename=require(gulp-rename);varuglify=require(gulp-uglify);

5、varclean=require(gulp-clean);varbuffer=require(vinyl-buffer);varmerge=require(merge-stream);/postcssPluginvarpostcss=require(gulp-postcss);varautoprefixer=require(autoprefixer);varcssnano=require(cssnano);/jstaskgulp.task(jsinit,function()returngulp.src(src/js/jquery-2.2.4.min.js,src/bootstrap/boots

6、trap.js).pipe(concat(dookay.js).pipe(uglify().pipe(rename(dookay.min.js).pipe(gulp.dest(dist/js););gulp.task(copy,function()gulp.src(src/js/common.js).pipe(uglify().pipe(gulp.dest(dist/js)/sassrendergulp.task(sass,function()gulp.src(src/bootstrap/stylesheets/*.scss).pipe(sass().pipe(gulp.dest(src/cs

7、s););/jade/pugrendergulp.task(pug,function()returngulp.src(src/*.pug).pipe(pug(pretty:true).pipe(gulp.dest(dist)/postcssAutopixergulp.task(postcss,function()varprocessors=autoprefixer,cssnano;returngulp.src(src/css/bootstrap.css,src/css/main.css).pipe(concat(all.css).pipe(postcss(processors).pipe(gu

8、lp.dest(dist/css););/spriteSmithgulp.task(sprite,function()varspriteData=gulp.src(src/images/icons/*.png).pipe(spritesmith(imgName:sprite.png,cssName:_sprite.scss,padding:2,imgPath:./images/sprite.png)varimgStream=spriteData.img.pipe(buffer().pipe(imagemin().pipe(gulp.dest(src/images);varcssStream=s

9、priteData.css.pipe(gulp.dest(src/css);returnmerge(imgStream,cssStream);)/Servergulp.task(connect,function()connect.server(root:.,livereload:true,port:3100);/watchTaskgulp.task(html,function()gulp.src(src/*.html).pipe(connect.reload(););gulp.task(css,function()gulp.src(src/css/*.css).pipe(connect.rel

10、oad(););gulp.task(js,function()gulp.src(src/js/*.js).pipe(connect.reload(););gulp.task(watch,function()gulp.watch(src/*.html,html),gulp.watch(src/css/*.css,css),gulp.watch(src/js/*.js,js);/imageTaskgulp.task(images,function()gulp.src(src/images/*).pipe(imagemin().pipe(gulp.dest(dist/images););gulp.task(temp,function()gulp.src(src/temp/*).pipe(imagemin().pipe(gulp.dest(dist/temp););/default-taskgulp.task(server,connect,watch);/gulpimagegulp.tas