我的Gulp前端工作流介绍.docx

我的Gulp前端工作流介绍关于前端工作流，已经有tmt-flow珠玉在前,今天介绍一下在之前项目开发过程中自己总结的一套常用的流程工具, 工作流依靠Webstorm作为IDE，有些必须的功能（文件即时编译）依赖IDE本身自带功能，并没有加到工作流中去。功能特性自动化流程Sass - CSSCSS Autoprefixer 前缀自动补全CSS 压缩 cssnanoCSS Sprite 雪碧图合成imagemin 图片压缩JS 合并压缩Pug 模板语言调试&部署监听文件变动，自动刷新浏览器 (LiveReload)项目目录结构Projectgulpfile.js/工作流配置文件package.jsondist/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.scssbootstrapmixinscss/存放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(gulp);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);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/bootstrap.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/css););/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(gulp.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=spriteData.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.reload(););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