node筆記——gulp修改靜態文件的名字

cmd小技巧：

1、換到下級或同等級目錄  

 D：

2、換到上級目錄

cd..

node 包管理器小技巧[以gulp為例]

npm install --save-dev gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector 等等插件

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('css',['index'],function(cb){
    return gulp.src('app/**/*.css')
        .pipe(minify())
        .pipe(concat('main.css'))
        .pipe(revContent())
        .pipe(gulp.dest('build/css'))
        .pipe(revContent.manifest())
        .pipe(gulp.dest('build/rev'));
})
gulp.task('revcss',['css'],function(){
    return gulp.src(['build/rev/*.json','build/*.html'])
        .pipe(revCollector({replaceReved: true}))//一定需要設置參數為true  否側不會替換上一次的值
        .pipe(gulp.dest('build/'))
        .pipe(notify("success!!!"))
})

 

目錄結構

　　

效果圖