gulp hot deploy 前端项目

gulp

类似Bower,Yeoman,Webpack,grunt, gulp 是个新一代的前端项目构建工具，你可以使用它及其插件对你的项目代码进行编译，还可以压缩你的js、css、sass代码，甚至压缩你的图片，gulp 的API较少，因此非常容易学习。 

优点

gulp让简单的事情继续简单，复杂的任务变得可管理。另外它是基于stream的。通过Node.js强大的流，不需要写中间文件，可以很快的完成项目的构建。gulp还自带有用的插件，简单的使用即可完成你期望的工作。例如"gulp-browserify"，"gulp-uglify"，"gulp-rev-append"等。

安装

Gulp由Node.js催生并编写的出的，因为需要先安装Node，然后npm安装即可。这里全局安装。

npm install -g gulp

package.json文件

npm init

根据提示，一步步即可生成package.json文件。

安装gulp包

npm install gulp --save-dev

带--save-dev，会自动加到devDependencies里面。新建gulpfile.js文件，最简单的如下：

//在项目根目录引入gulp和uglify插件
var gulp = require('gulp');

gulp.task('default',function(){
    // TODO
});

Watch

希望可以运行gulp命令时执行 watch 任务。这个任务随后会监听变化并更新文件。这里创建一个'js-watch'任务，执行前先执行'js'任务，之后通知browserSync重新加载

// 创建一个任务确保JS任务完成之前能够继续响应浏览器重载
gulp.task('js-watch', ['js'], browserSync.reload);

BrowserSync

用于监听文件变化的工具并能自动刷新服务。开发中hot deploy能提高开发效率。其监听的文件一旦有改变，浏览器立即刷新页面。调用browserSync.reload可以实现这点。

npm install browser-sync --save-dev

安装依赖

//用该插件打包项目
npm install gulp-browserify -save -dev

//用于合并文件
npm install gulp-concat -save -dev

//开发中不可避免的要对URL添加MD5版本号，项目中我没使用，有兴趣可以尝试。
npm install gulp-rev-append -save -dev

//这个是最近看到的一个，主要用于对sass进行压缩
npm install gulp-sass -save -dev

//用到压缩
npm install gulp-uglify -save -dev

示例

我的项目中完整如下：

// gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify')
var browserSync = require('browser-sync').create();

var sass = require('gulp-sass');

var reload = browserSync.reload;

var config = {
	baseDir : '',//当前目录为程序根目录
	//监控app文件夹下的html,css,js文件的change
	watchFiles : ['app/*.html', 'app/css/*.css', 'app/script/*.js']
}

gulp.task('server', function () {
	browserSync.init({
		files : config.watchFiles,
		server : {
			baseDir : config.baseDir
		}
	});
	//监听源文件的change
	gulp.watch("app/css/*.css",['css']);
	gulp.watch("app/script/*.js",['js-watch']);
	gulp.watch("app/js/*.js",['js-watch']);
	gulp.watch("app/*html").on('change', reload);
	gulp.watch("index.html").on('change', reload);
})

//scss编译后的css将注入到浏览器里实现更新
gulp.task('css', function() {
	return gulp.src('app/css/*.css')
	// .pipe(scss())
	.pipe(concat('all.css'))//合并后的文件名
	.pipe(gulp.dest('css'))
	.pipe(reload({stream : true}));
});

//处理完JS文件后返回流
gulp.task('js', function () {
	return gulp.src(["app/script/*.js", "app/js/loginController.js"])
	.pipe(browserify())//使用browserify进行打包
	.pipe(uglify())//压缩文件
	.pipe(concat('all.js'))//合并后的文件名
	.pipe(gulp.dest('js'));//合并后的文件路径
});
// 创建一个任务确保JS任务完成之前能够继续响应浏览器重载
gulp.task('js-watch', ['js'], browserSync.reload);

//定义默认任务
gulp.task('default', ['server']);

目录说明

源代码和生成的文件最好分开存放。app文件夹下都是编写的源代码，打包生成的文件都存放在相应的目录下，如css、js等。