windows从零使用gulp——修改静态文件名

1、前期准备：安装nodejs和npm，这个自己网上查找类似的资料

2、安装cnpm：npm install cnpm -g --registry=https://registry.npm.taobao.org

由于npm安装插件过程经常下载缓慢或出现异常，可以选择安装cnpm。以下过程就是按照cnpm来写，如果想用npm只要把cnpm替换成npm即可

3、全局安装gulp：cnpm install gulp -g。

查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

4、本地安装gulp插件：cd到项目根目录下

cnpm install --save-dev gulp gulp-clean gulp-minify-css gulp-rename gulp-rev gulp-rev-collector gulp-concat gulp-notify gulp-html-replace gulp-replace gulp-htmlmin gulp-livereload

把你用到的插件都安装进去，上面只是示例，可以添加或者删除插件

5、新建gulpfile.js文件

同样在根目录下新建gulpfile.js文件，以下就是实现修改静态文件名的gulpfile.js文件

var gulp = require('gulp'),                        //基础库
    clean = require('gulp-clean'),                 //清空文件夹
    minify = require('gulp-minify-css'),           //css压缩
    rename = require('gulp-rename'),               //文件重命名
    revContent = require('gulp-rev'),                     //更改版本名
    revCollector = require('gulp-rev-collector'),     //gulp-rev的插件，用于html文件更改引用路径
    concat = require('gulp-concat'),               //合并多个文件
    notify = require('gulp-notify'),               //提示
    htmlreplace = require('gulp-html-replace'),
    replace = require('gulp-replace'),
    htmlmin = require('gulp-htmlmin'),
    livereload = require('gulp-livereload');

gulp.task('clean',function(){
    return gulp.src('build',{ read : false})       //src的第二个参数的{read:false}，是不读取文件,加快程序。
        .pipe(clean());
})
gulp.task('index',['clean'],function(){
    return gulp.src(['app*/index.html'])
        .pipe(rename(function(path){
            path.basename ='index';
            path.extname = ".html";
        }))
        .pipe(gulp.dest('build/'))
})
gulp.task('readyFile',['index'],function(cb){
    //修改文件名
    return gulp.src(['app*/css*/*.css','app*/js*/**/*.js'])
        .pipe(revContent())
        .pipe(gulp.dest('build/'))
        .pipe(revContent.manifest())
        .pipe(gulp.dest('build/rev'));
})

gulp.task('staticFile',['index'],function(cb){
    //不改名的可以放到此处
    return gulp.src(['app*/css*/fonts*/**','app*/lib*/**','app*/templates*/**','app*/img*/**','app*/json*/**'])
        .pipe(gulp.dest('build/'));
})
gulp.task('revFile',['readyFile'],function(){
    //把index.html引用到的文件进行替换
    return gulp.src(['build/rev/*.json','build/app*/*.html'])
        .pipe(revCollector({replaceReved: true}))//一定需要设置参数为true  否侧不会替换上一次的值
        .pipe(gulp.dest('build/'))
        .pipe(notify("success!!!"))
})
gulp.task('default',['staticFile','revFile']);//默认执行函数

6、运行gulp：执行gulp default或gulp将会调用default任务里的所有任务['staticFile','revFile']。

虽然说是原创，但是大部分是把各个地方的东西归纳到一起了。
主要参考的是以下文章，有兴趣的可以去原文查看。
http://www.ydcss.com/archives/18#lesson1
http://www.cnblogs.com/MonaSong/p/5842808.html
http://cnodejs.org/topic/5516736ce26684ed7ff21e0f
http://sentsin.com/web/861.html