前端自动化工具打包gulp学习之路

gulp作为前端构建项目的一个工具，自己理解gulp主要方面的作用：
1.构建本地服务器。
2.快速构建项目。
3.对代码进行压缩合并，使代码简洁，减少频繁的请求工作。

gulp学习地址： gulp中文网：http://www.gulpjs.com.cn/。

一、gulp安装
1.1 全局安装gulp，前提是必须安装了node.js/npm;npm install --global gulp
1.2作为项目的开发依赖（需要在项目目录下）npm install --save-dev gulp
1.3 根据自己的项目需求，安装其他开发依赖npm install gulp-connect gulp-concat gulp-uglify --save-dev
1.4在项目根目录创建一个名为gulpfile.js文件，看项目需要依赖哪些开发项，进行依赖注入在gulpfile.js中，并创建gulp任务。
var gulp=require('gulp');var connnect=require('gulp-connect');......gulp.task('kathie',function(){//此任务要做的事情。})；
gulp.task('default',['kathie']);//默认执行的任务
1.5在项目跟目录创建一个package.json的文件，这个文件是一个严格的json文件。主要是项目的配置文件。其中很多属性可以通过npm-config来生成。
主要信息有以下。其中除了devDependencies之外，可以通过npm init来配置；devDependencies依赖的插件需要通过npm install gulp-connect --save-dev 来安装。
1.6 package.json 配置详解：http://www.cnblogs.com/tzyy/p/5193811.html#_h1_27

二、npm中的开发依赖项学习。
2.1 gulp-connect： run a webserver。具体用法：
//1.引入插件： var gulp = require('gulp'); var connect = require('gulp-connect');
//2.创建watch任务去检测html文件，其定义了一个当html改动之后，去调用一个gulp的taskgulp.task('watch',function(){ gulp.watch(['./www/.html'],['html']);})
//3.使用connect启动一个web服务器
gulp.task('connect',function(){
connect.server({
root: "www",
livereload : true,
//port:8090, 可以更改本地默认端口号
//host:'gulp.dev'
});});
//4.加载www中的一个主页面
gulp.task('html',function(){
gulp.src('./www/.html')
.pipe(connect.reload());
});
//5.设置默认任务
gulp.task('default',['connect','watch']);
//6.不要关闭dos命令行，如果没有修改端口号，直接浏览器输入http://localhost:8080

2.2 browser-sync ：启动一个本地服务器，配置启动页面；同时修改代码之后能自动刷新页面，免按F5；browser-sync与gulp一起使用方法。
//1.引入插件： var browserSync=require('browser-sync').create();
//2.创建任务，并使用browserSync创建服务器。gulp.task('serve',function(){ browserSync.init({
server:{
basedir : './'
//初始化项目根目录为“./”
},
files:[
'www/css/.css',
'www.js',
'www.html',
'www/img/',
'www/fonts/'
] });
gulp.watch(['./www/.html'],['html']); gulp.watch("www*.html").on("change",browserSync.reload);
//3.watch这个api是监控当前文件发生变化时触发的任务；这里是当html文档发生变化时，浏览器会自动reload。 });

以下为案例：
//引入gulp、gulp插件以及browser-sync
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
less = require('gulp-less');
//创建一个新的gulp任务
gulp.task('serve',['less'],function(){
//初始化项目跟目录为'./'（也可以使用代理proxy: "yourlocal.dev"） browserSync.init({
server: './'
});
//创建gulp监听器，监听less文件的变化，自动执行'less'任务，编译less并生成css文件 gulp.watch('./less/.less', ['less']).on('change', function(event){ console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });
//监听html文件的变化，自动重新载入
gulp.watch('./.html').on('change', browserSync.reload); });

//创建自动编译less的任务，这边需要return stream以保证browserSync.reload在正确的时机调用
gulp.task('less', function(){
return gulp.src('./less/*.less')
.pipe(less())
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());});
//默认启动的gulp任务数组['serve']gulp.task('default', ['serve']);

2.3 gulp-rev and gulp-rev-collector目的是对css和js文件命名进行加密处理；
同时在对应的html中的路径进行更新。
var gulp = require('gulp');
var concat = require('gulp-concat');

//- 多个文件合并为一个；var minifyCss = require('gulp-minify-css');

//- 压缩CSS为一行；var rev = require('gulp-rev');

//- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector');

//- 路径替换gulp.task('cssConcat', function() {
//- 创建一个名为 concat 的 task gulp.src('www/css/*.css')
//- 需要处理的css文件，放到一个字符串数组里 .pipe(minifyCss()) //- 压缩处理成一行 .pipe(rev())
//- 文件名加MD5后缀 .pipe(gulp.dest('dist/css'))
//- 输出文件本地 .pipe(rev.manifest()) //- 生成一个rev-manifest.json

.pipe(gulp.dest('./rev')); //- 将 rev-manifest.json 保存到 rev 目录内});
gulp.task(
'rev',['cssConcat'],function() {
console.log(111)
gulp.src(['./rev/rev-manifest.json', 'dist/index.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('dist')); //- 替换后的文件输出的目录
});
gulp.task('default', [ 'rev']);