使用gulp 合并压缩打包，实时监控文件，实现本地server
今天不讲webpack，就说说gulp是怎么进行压缩合并打包
首先你的安装gulp ：
npm install gulp -g --save-dev
然后最基本的你因该知道gulp 的四个方法，
gulp.src：读取文件
gulp.pipe：将文件流输入到指定的文件目录
gulp.task：建立gulp任务，例如合并，压缩，清除文件，
gulp.watch：用于监听文件的变化
关于其他的嘛，那就是gulp 之所以那么强大，原因就是他有很多插件，我们要完成一些功能就必须要学会使用一些插件
1）在这里我给出package.json 文件中的devDependencies
"gulp": "^3.9.1", //安装gulp "gulp-clean": "^0.3.2", //gulp的清除插件，主要用于每次打包发布，为了不出差错，我们希望要删除之前的一些文件 "gulp-concat": "^2.6.1", //合并文件 "gulp-connect": "^5.0.0", //建立一个本地server,这样我们就可以使用localhost：port 访问我们的项目了 "gulp-livereload": "^3.8.1", //实时监控 "gulp-minify-css": "^1.2.4", //压缩css "gulp-minify-html": "^1.0.6", //压缩html "gulp-open": "^2.0.0", //一般与gulp-connect使用， "gulp-rev": "^8.1.0", //主要用于缓存文件，给文件加上一个MD5后缀。 "gulp-rev-collector": "^1.2.3", //主要用于缓存文件处理，替换文件[这里可以去了解gulp 缓存的问题，百度一下] "gulp-sequence": "^0.4.6", //多个任务的执行顺序控制 "gulp-sync": "^0.1.4", "gulp-uglify": "^3.0.0", //压缩js
2）在你完成一系列安装之后，接下就是使用安装的插件完成一些东西。
首先你的在你的项目文件夹中有一个gulpfile.js文件【这个文件你可以把他看作你的gulp 启动文件】
在这个文件中你可以一一引进你安装的gulp插件
例如：
var gulp = require("gulp"); //压缩 var uglify = require("gulp-uglify"); var minifyCss = require("gulp-minify-css"); var minifyHtml = require("gulp-minify-html"); //清除不不要的文件 var gulpclean = require('gulp-clean'); // npm install gulp-open --save-dev //本地打开一个地址 var open=require("open"); //npm install --svae-dev gulp-livereload（重新加载，刷新） var livereload = require('gulp-livereload'); //npm install --svae-dev gulp-connect（本地服务器） var connect= require('gulp-connect'); //npm install --save-dev gulp-rev-collector //npm install --save-dev gulp-sync var rev = require('gulp-rev'); var revCollector = require('gulp-rev-collector'); //合并文件（用于压缩之后） //npm install --save-dev gulp-concat var concat = require('gulp-concat'); //多个任务的顺序执行 //npm install --save-dev gulp-sequence var gulpSequence = require('gulp-sequence');
当然你也可以用一个简单的方法，可以去get一下gulp-load-plugins的使用
3）好了现在就正式使用了
gulp.task('js',function(){ return gulp.src('myPro/js/**/*.js') .pipe(concat('main.js')) //- 合并后的文件名 .pipe(uglify()) //使用uglify进行压缩,更多配置请参考： .pipe(rev()) //- 文件名加MD5后缀 .pipe(gulp.dest('dist/js')) .pipe(rev.manifest()) //- 生成一个rev-manifest.json（这个文件是我们控制缓存文件的关键，主要用于文件替换） .pipe(gulp.dest('dist/rev/js')) .pipe(livereload()); }); gulp.task('html',function(){ return gulp.src('myPro/**/*.html') .pipe(minifyHtml()) //压缩 //.pipe(rev()) .pipe(gulp.dest('dist')) .pipe(livereload()); }); gulp.task('css',function(){ return gulp.src('myPro/css/**/*.css') .pipe(concat('main.css')) .pipe(minifyCss()) //压缩css .pipe(rev()) //- 文件名加MD5后缀 .pipe(gulp.dest('dist/css')) .pipe(rev.manifest()) //- 生成一个rev-manifest.json .pipe(gulp.dest('dist/rev/css')) //- 将 rev-manifest.json 这个文件是我们控制缓存文件的关键，主要用于文件替换） .pipe(livereload()); }); gulp.task('watch', function() { /* livereload.listen({ start:true, port:8080, reloadPage:"index.html" }); //要在这里调用listen()方法 */ //自动刷新 livereload.listen(); //构建本地服务器 connect.server({ root:['myPro'],//从开发文件读取（默认是index.html） livereload:true,//重新刷新（针对高级浏览器） port:8091,//端口号 }); open("http://localhost:8091");//自动打开地址，网页 //监听改变的文件,只要有以下的文件内容变化，就会刷新 gulp.watch('myPro/css/**/*.css', ['css']); gulp.watch('myPro/html/**/*.html', ['html']); gulp.watch('myPro/js/**/*.js', ['js']); }); //清除dist文件夹 gulp.task("clean",function(){ console.log("......do clearing......"); return gulp.src(['dist'],{read: false}) //{read: false}直接进行删除，不需要读取文件 .pipe(gulpclean({force: true})) //{force: true}强制删除 .pipe(livereload()); }); //使用gulp-rev替换文件，清除缓存的弊端问题 gulp.task("rev",function(){ return gulp.src(['dist/**/*.json','dist/**/*.html']) .pipe(revCollector({ replaceReved: true, })) .pipe(gulp.dest('dist')) .pipe(livereload()); }); //建立一个总的任务 gulp.task("build",['js','css','html','watch']); //gulp.task("default",['build']); //直接运行gulp 默认启动server，会一次执行clean ,[js,css,html,html]（中括号里的同步执行）,rev ,watch
//可以去了解一下gulpSequence的用法 gulp.task("default",function(cd){ gulpSequence('clean',['js','css','html'],'rev','watch')(cd) });
值得注意的是：在每个任务的回调函数我们有必要进行返回通知，通知后面的任务当前这个任务执行完啦，可以接着执行下面的任务啦。。。。。。
在这里只是说如何使用（也只是使用了一部分），至于原理没做深入了解。。。
https://github.com/EvalGitHub/angular1_require_gulp
