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等。