修復 git func 文件夾 open lean 發生 遍歷 nod

　　把之前用到的gulp總結整理下，有時候說不出來的，就寫出來吧，做個筆記，以後也可以慢慢補充

　　cnpm i --save-dev gulp 把nodejs模塊寫到package.json配置文件中，當保存到git倉庫時，只需保存package.json即可 　　用到的gulp模塊有：gulp-clean/gulp-concat/gulp-connect/gulp-cssmin/gulp-less/gulp-load-plugins/gulp-uglify/open 　　　　註：安裝node模塊是可批量安裝的 cnpm i --save-dev gulp-clean gulp-concat.... 　　gulp-plumber：當編譯css or js時發生錯誤，它不會立即中斷線程，而只是拋出錯誤

　　gulp有兩個優點：

　　　　1、基於流，效率非常高 簡言之，把產生的中間文件放在內存中進行處理，直到最後一步才生成文件，操作文件

　　　　2、任務化，編寫成一個個小任務 然後合並執行任務 邏輯清晰 可讀性好

　　gulp有兩個功能很重要——壓縮、合並，合並之後減少Http請求，壓縮後減少帶寬

　　常用的api(函數):src、dest、watch、task、pipe　　

　　　　src: 讀取文件、文件夾 　　　　dest: 生成文件、寫文件 　　　　watch：監控文件 　　　　task：定制任務 　　　　pipe：用流的方式處理文件 　　貼出gulpfile.js的文件編寫： 　　

//
 
引入模塊
var gulp = require(‘gulp‘);
var $ = require(‘gulp-load-plugins‘)(); //其他的gulp模塊就可以直接通過$來引用，而不需再聲明變量
var open = require(‘open‘);
 
//全部變量來定義目錄路徑
var app = {
    srcPath:‘src/‘,        //源代碼放置的位置
    devPath:‘build/‘,    //整合之後的文件，開發目錄
    prdPath:‘dist/‘        //用於生產、部署
};

//把bower下載的第三方創建拷貝到生產環境目錄
gulp.task(‘lib‘,function
 
(){
    gulp.src(‘bower_components/**/*.js‘)      //對bower_..下面的子文件進行深度遍歷，讀取文件
    .pipe(gulp.dest(app.devPath+‘vendor‘))    //操作：寫文件
    .pipe(gulp.dest(app.prdPath+‘vendor‘))
    .pipe($.connect.reload())//構建完，刷新瀏覽器進行實時預覽

});

gulp.task(‘html‘,function(){
    gulp.src(app.srcPath+‘**/*.html‘)
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload())

});

gulp.task(‘json‘,function(){
    gulp.src(app.srcPath+‘data/**/*.json‘)
    .pipe(gulp.dest(app.devPath+‘data‘))
    .pipe(gulp.dest(app.prdPath+‘data‘))
    .pipe($.connect.reload())

});

gulp.task(‘less‘,function(){
    gulp.src(app.srcPath+‘style/index.less‘)
    .pipe($.plumber()) //修復了pipe處理異常的bug，讓任務執行更平滑
    .pipe($.less())
    .pipe(gulp.dest(app.devPath+‘css‘))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath+‘css‘))
    .pipe($.connect.reload())

});

gulp.task(‘js‘,function(){
    gulp.src(app.srcPath+‘script/**/*.js‘)
      .pipe($.plumber())
    .pipe($.concat(‘index.js‘))
    .pipe(gulp.dest(app.devPath+‘js‘))
    .pipe($.uglify())
    .pipe(gulp.dest(app.prdPath+‘js‘))
    .pipe($.connect.reload())

});

gulp.task(‘image‘,function(){
    gulp.src(app.srcPath+‘image/**/*‘)
    .pipe($.plumber())
    .pipe(gulp.dest(app.devPath+‘image‘))
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath+‘image‘))
    .pipe($.connect.reload());

});

gulp.task(‘build‘,[‘image‘,‘js‘,‘less‘,‘json‘,‘html‘,‘lib‘]);

//每次發布的時候，把之前的目錄清除，避免舊的文件對當前項目造成影響
gulp.task(‘clean‘,function(){  //構架任務
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean());

});

//編寫個服務器
gulp.task(‘serve‘,[‘build‘],function(){
    $.connect.server({
        root:[app.devPath],
        livereload:true,    //適用於高級瀏覽器，自動刷新瀏覽器，ie就不支持
        port:1234

    });
    open(‘http://localhost:1234‘);

    //自動構建
    gulp.watch(‘bower_components/**/*‘,[‘lib‘]);
    gulp.watch(app.srcPath+‘**/*‘,[‘html‘]);
    gulp.watch(app.srcPath+‘data/**/*‘,[‘json‘]);
    gulp.watch(app.srcPath+‘style/**/*‘,[‘less‘]);
    gulp.watch(app.srcPath+‘script/**/*‘,[‘js‘]);
});

gulp.task(‘default‘,[‘serve‘])

自動化構建工具—gulp的用法簡單總結