Gulp介绍中文主页：http://www.gulpjs.com.cn/gulp是一个类似于grunt功能的前端工程构建工具，也是一个基于Nodejs的自动任务运行器，可以自动完成javascript/Coffee/sass/less/html/image/css等合并、压缩、检查、监控文件变化、浏览器自动刷新、测试等任务。Gulp更高效（异步多任务），更易用，并且插件安装了高质量的nodejs，查看版本：node-vcreateasimpleapplicationgulp_test|-dist|-src|-js|-css|-less|-index.html|-gulpfile.js-----gulp配置文件|-包。json{"name":"gulp_test","version":"1.0.0"}安装gulp：全局安装gulpnpminstallgulp-g本地安装gulpnpminstallgulp--save-dev配置代码：gulpfile.js//引入gulpModulevargulp=require('gulp');//定义默认任务gulp.task('任务名称',function(){//把你的任务的任务代码放在这里});gulp.task('default',['task'])//异步执行构建命令：gulp使用gulp插件相关插件：gulp-concat：合并文件（js/css）gulp-uglify：压缩js文件gulp-rename：文件重命名gulp-less:编译lessgulp-clean-css:压缩cssgulp-livereload:实时自动编译刷新重要APIgulp.src(filePath/pathArr):指向指定路径下的所有文件，返回一个文件流对象用于读取文件gulp.dest(dirPath/pathArr))指向所有指定文件夹输出文件到文件夹gulp.task(name,[deps],fn)定义任务gulp.watch()监听文件变化处理js创建js文件源代码/js/test1.js(函数(){functionadd(num1,num2){varnum3=0;num1=num2+num3;returnnum1+num2;}console.log(add(10,30));})();src/js/test2.js(function(){vararr=[2,3,4].map(function(item,index){returnitem+1;});console.log(arr);})();下载插件：npminstallgulp-concatgulp-uglifygulp-rename--save-dev配置编码varconcat=require('gulp-concat');varuglify=require('gulp-uglify');varrename=require('gulp-rename');gulp.task('minifyjs',function(){returngulp.src('src/js/*.js')//操作的源文件.pipe(concat('built.js'))//MergeintoTemporaryfile.pipe(gulp.dest('dist/js'))//生成到目标文件夹.pipe(rename({suffix:'.min'}))//rename.pipe(uglify())//compression.pipe(gulp.dest('dist/js'));});gulp.task('default',['minifyjs']);页面导入js浏览测试：index.html打包测试：gulp处理css创建less/css文件src/css/test1.css#div1{宽度：100px；高度：100px；背景：绿色；}src/css/test2.css#div2{宽度：200像素；高度：200px；背景：蓝色；}src/less/test3.less@base：黄色；.index1{颜色：@base；}.index2{颜色：绿色；}下载插件：npminstallgulp-lessgulp-clean-css--save-dev配置编码varless=require('gulp-less');varcleanCSS=require('gulp-clean-css');//less处理任务gulp.task('lessTask',function(){returngulp.src('src/less/*.less').pipe(less()).pipe(gulp.dest('src/css'));})//css处理任务，指定依赖任务gulp.task('cssTask',['lessTask'],function(){returngulp.src('src/css/*.css').pipe(concat('built.css')).pipe(gulp.dest('dist/css')).pipe(rename({suffix:'.min'})).pipe(cleanCSS({compatibility:'ie8'})).pipe(gulp.dest('dist/css'));});gulp.task('default',['minifyjs','cssTask']);页面导入css浏览测试：index.html
