gulp前言Gulp是一个基于Nodejs的自动任务运行器，可以自动完成javascript/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览等工作。服务器自动刷新，生成部署文件，监听文件变化后，重复指定步骤。（引用自Kasmine的博客）。使用Gulp的好处是可以使用流的方式来处理文件。使用pipeline（管道）思想，上一层的输出直接成为下一层的输入，多个任务和操作通过pipeline连接起来，所以只有一次I/O的过程更清晰纯粹.Gulp去除了中间文件，只将最终输出写入磁盘，从而使整个过程更快（引用自Kasmine的博客）。说到gulp，我们都会说到一个名词，那就是前端自动化构建，接下来讲解一下前端自动化构建。前端自动化构建”说到构建工具，我经常在前面加上“自动化”二字，因为构建工具就是用来让我们停止做机械重复的事情，解放双手。”（引自JasinYip的回答）.Gulp安装及基本使用0.安装node.js和cnpm淘宝镜像：因为gulp是一个基于Nodejs的自动任务运行器，所以必须安装node.js。因为npm是国外的，用起来比较慢。这里我们使用淘宝的cnpm镜像安装插件和应用，cnpm安装指南。1.全局安装gulp：$npminstall--globalgulp2.安装为项目的开发依赖（devDependencies）：$npminstall--save-devgulp3。在项目根目录中创建一个名为gulpfile.js的文件：vargulp=require('gulp');gulp.task('default',function(){//willPutyourdefaulttaskcodehere});4.rungulp$gulpdefaulttask（任务）会运行，在这里，这个task什么都不做。Gulp插件使用相关插件使用请参考对应链接。感谢原作者对插件的分析。如有侵权，请联系删除。谢谢。根据需要配置package.json，在根目录安装npminstall。节点流（flow）的使用gulp-sourcemaps（编译前显示位置）gulp-autoprefixer的使用（根据浏览器版本设置自动处理css属性的浏览器前缀）gulp-less的使用（少编译)用法及相关插件gulp-sass(sass编译)用法及相关插件gulp-clean-css(压缩CSS文件)用法及相关插件gulp-uglify(js压缩插件)用法及相关插件gulp-rename(文件重命名)用法及相关插件gulp-concat(js文件合并)用法及相关插件gulp-imagemin(图片压缩)用法gulp-changed(仅通过更改文件)用法browsersync（浏览器实时刷新）babel的用法（es6编译es5）下面附上我自己项目gulpfile文件源码的用法//gulpimportletgulp=require('gulp');//pathletsrc='./src',//入口文件夹DIST='./static',//出口文件夹LESS_SRC=src+'/**/*.less',//less编译入口（**匹配0个或多个js文件夹的子文件夹)JS_SRC=SRC+'/**/*.js',//JS编译入口(*匹配js文件夹下所有.js格式文件)IMG_SRC=SRC+'/**/images/*.{png,jpg,gif,ico}',//图片编译入口HTML='./*.html';//html文件//插件letless=require('gulp-less'),//less编译sourcemaps=require('gulp-sourcemaps'),//浏览器在编译前显示less或js位置uglify=require('gulp-uglify'),//压缩js文件pump=require('pump'),//可以方便我们找到代码错误位置cleanCSS=require('gulp-clean-css'),//css压缩rename=require("gulp-rename"),//文件重命名autoprefixer=require('gulp-autoprefixer'),//浏览器版本根据设置自动处理css属性的浏览器前缀concat=require('gulp-concat'),//合并javascript文件减少网络请求imagemin=require('gulp-imagemin'),//图像压缩pngquant=require('imagemin-pngquant'),//深度压缩changed=require('gulp-changed'),//仅通过改变的文件browserSync=require('browser-sync').create(),//实时刷新浏览器babel=require('gulp-babel');//用es6编译es5//刷新浏览器letreload=browserSync.reload;//lesscompilegulp.task('less',()=>{letoptions={browsers:['last5versions','Android>=4.0'],//浏览器版本cascade:true,//是否美化propertiesValueDefault:trueLikethis://-webkit-transform:rotate(45deg);//transform:rotate(45deg);remove:true//是否去除不必要的前缀Default:true};returngulp.src([LESS_SRC,'!'+SRC+'/common/**/*.less'])//编译除common文件夹之外的所有less.pipe(sourcemaps.init())//启用sourcemaps功能.pipe(changed(DIST))//只通过修改过的文件.pipe(less())//执行less编译操作.pipe(autoprefixer(options)).pipe(cleanCSS({keepSpecialComments:'*'//浏览器保留所有特殊前缀你用autoprefixer生成的prefix，如果不加这个参数，你的一些前缀可能会被删除}))//开启css压缩.pipe(rename(//{//dirname:"css",//在对应目录下生成,可以修改父目录的名称，但是都只能生成到一个文件夹中//basename:"aloha",//filename//prefix:"bonjour-",//fileprefix//suffix:".min",//文件后缀//extname:".css"//文件类型//}function(path){//path.dirname+="/css";//生成在对应目录下，即可修改上层目录的名字，但是所有的只能生成一个文件夹//path.basename+="-goodbye";//文件名//path.extname=".md";//文件类型//前缀andsuffixarenotvalidpath.dirname=path.dirname.replace('less','css');//修改上层目录，生成对应目录}))//改名.pipe(sourcemaps.write('./map'))//生成记录位置信息的sourcemaps文件，为空时在解析目录。pipe(gulp.dest(DIST))//编译导出，可以生成目录也可以作为目录存在.pipe(reload({stream:true}));});//js操作gulp.task('js',(cb)=>{//pump是一个小型节点模块，它将流连接在一起并在其中一个关闭时销毁它们//当dest被发出时使用标准的source.pipe(dest)事件源将不会关闭或错误时销毁//您还不能提供回调来告知管道何时完成。pump([gulp.src([JS_SRC]),//JS编译入口sourcemaps.init(),//启用sourcemaps函数changed(DIST),//仅通过改变的文件babel({presets:['env']//编译成es5}),uglify(),//启用压缩功能concat({path:'js/all.js'}),//启用js合并功能rename({suffix:'.min'}),//在名字中间加上'.min'sourcemaps.write('./map'),//生成记录位置信息的sourcemaps文件export,可以生成目录或者reload({stream:true})],cb//函数有参数)});//图片压缩（因为可能图片太多，不建议每次都更新）//cmd命令：gulpimagesgulp.task('images',()=>{gulp.src([IMG_SRC])//JS编译入口.pipe(changed(DIST))//仅通过改变文件.pipe(imagemin({optimizationLevel:5,//Type:NumberDefault:3取值范围：0-7（优化级别）progressive:true,//Type:BooleanDefault:falseLosslesscompressedjpgimagesinterlaced:true,//Type:Booleandefault:falseinterlacedgifforrenderingmultipass:true,//Type:BooleanDefault:false多次优化svg直到完全优化svgoPlugins:[{removeViewBox:false}],//不要移除svg的viewbox属性use:[pngquant()]//使用pngquantplugin进行深度压缩})).pipe(gulp.dest(DIST))//编译导出，可生成目录或存在目录})//静态服务器+监控less/js/html文件gulp.task('server',()=>{browserSync.init({server:{baseDir:"./"}});});//执行默认操作并依次执行附加操作gulp.task('default',['server'],()=>{//执行操作gulp.start(['less','js']);//监听变化gulp.watch(LESS_SRC,['less']);//监听变化less并执行相应的操作gulp.watch(JS_SRC,['js']);//监听js变化并执行相应的操作gulp.watch(HTML,reload);})附上相应的package.json{"devDependencies":{"babel-core":"^6.26.0","babel-preset-env":"^1.6.1","browser-sync":"^2.23.6","gulp":"^3.9.1","gulp-autoprefixer":"^5.0.0","gulp-babel":"^7.0.1","gulp-changed":"^3.2.0","gulp-clean-css":"^3.9.3","gulp-concat":"^2.6.1","gulp-imagemin":"^4.1.0","gulp-less":"^4.0.0","gulp-uglify":"^3.0.0","imagemin-pngquant":"^5.1.0","pump":"^3.0.0"}}问题记录gulpcompileless,dirname.replace文件夹后css文件夹，如何给对应的后缀加上.min？（一口重命名）
