【Node.js學習筆記】使用Gulp項目自動化構建工具

剛接觸node.js，對前端的一些東西還不是很清楚，據說Gulp這東西很強大，先來看看從網上抄的一段關於自動化構建的描述：

　　在為數眾多的中小型軟件作坊中，不存在自動化構建和發布工具。構建、交付准備環境、代碼發布全由手工完成，同樣還有運行測試、備份舊版本、新版本打標簽以及許多其他重復的事情。畢竟你可能認為這全是非常簡單的工作，集成開發環境通過按鈕或快捷鍵就可構建項目，你開啟兩個窗口拖放少許文件或文件夾即可完成網站發布。但當你在維護代碼庫和應用時所有這些事情加在一起，這里幾分鍾，那里幾分鍾，最終會浪費幾個小時。

后續：

經過本人最近一段時間的嘗試和探索，發現Gulp的作用如下（純個人觀點，很可能誤導）：

1.重構正式運行的文件夾目錄結構，因為有時候在開發時候的最優選擇未必是發布時候的最優目錄結構。

2.自動壓縮CSS/JS

3.配合Browser-Sync這類的瀏覽器自動工具，還有一些測試工具，從而實現真正的自動化測試。

本人嘗試Gulp的過程如下：

所用IDE:VS 2012 並安裝node.js tools插件

1.新建一個Node.Js express 4項目，會給新建一個welcome的node.js程序。

2.通過npm引用相關包，我用到的包有：

gulp、del、run-sequence、gulp-jade、gulp-concat、gulp-uglify、gulp-rename

3.在原來新建好的welcome的項目基礎上，我再public/javascripts下面新建了個js文件，叫test.js，內容隨便寫幾行js。

4.根目錄下新建個gulpfile.js，然后在cmd中cd到網站根目錄下，或者直接右鍵點擊項目，選擇open command xxxx，然后敲個gulp（如果報錯，先全局安裝gulp再試）相信里面的注釋已經比較清楚了。

'use strict';
var gulp=require('gulp');//引用類庫，相當於.net中的using
var plugins = {
    del: require('del'),
    runSequence: require('run-sequence'),
    jade: require('gulp-jade'),
    concat: require('gulp-concat'),
    uglify: require('gulp-uglify'),
    rename:require('gulp-rename')    
};
var jade = plugins.jade;
var concat = plugins.concat;
gulp.task('default', function (callback) {//default是入口
    plugins.runSequence(
        'task-clean',
         ['task-script'], 
         'task-jade',
         callback
    );
});
gulp.task('task-clean', function (callback) { 
    plugins.del(['./dist/*.*'],callback());//清理dist文件夾中原來的東西
});
gulp.task('task-script', function () {
    gulp.src('public/javascripts/*.js', { base:'public'})
    .pipe(plugins.uglify())//js壓縮
    .pipe(plugins.rename({extname:'.min.js'}))//重命名
    .pipe(gulp.dest('dist'));//輸出到dist目錄
});
var watcher= gulp.watch('public/javascripts/*.js', ['task-script']);//監控這個文件夾，有變化了運行task-script task
watcher.on('change', function (e) {
    console.log('File ' + e.path + ' was ' + e.type + ', running tasks...');//變化了之后控制台打印一下，方便調試
});

 ===========后續，文件更改自動刷新瀏覽器=====================

5.既然文件都變了，那肯定要重置當前的瀏覽器狀態，讓他自己來刷新，免得我們每次都得手動去做這件事情，這時候我們就需要引入Browser-Sync，直接貼代碼比較清晰一點

//構建Gulp Task，用來啟動一個mini Server，Host你的網站
gulp.task('browser-sync', function () {
    plugins.browserSync.init({
        server: {
            baseDir: './dist'
        },       
        port: 8888       
    })
});
//gulp task：刷新瀏覽器
gulp.task('bs-reload', function () {
    plugins.browserSync.reload();
    console.log("模塊重新構建成功".green);
});
var watcher = gulp.watch(
    ['public/javascripts/*.js','index.html'],
     ['task-script', 'task-index', 'bs-reload']);//監控這個文件夾，有變化了運行task,最后刷瀏覽器

6.JS/CSS加上時間戳，防止因為瀏覽器緩存造成的各種操蛋的問題。

//在構建Html的時候，去給Html中的引用加上版本號，而不是在構建JS的時候，我犯過這錯誤
gulp.task('task-index', function () {
    var version = (new Date).valueOf() + '';
    gulp.src('index.html')
    .pipe(plugins.replace('.js"></script>', '.min.js?v=' + version + '"></script>'))
    .pipe(gulp.dest('dist'));
    console.log('task-index 構建成功'.green);
});

 7. 參數化構建，把一些東西寫到配置里面，優化一把

var gulp=require('gulp');
var del=require('del');
var runSequence=require('run-sequence');
var concat=require('gulp-concat');
var uglify=require('gulp-uglify');
var rename=require('gulp-rename');
var colors=require('colors');
var browserSync=require('browser-sync').create();
var appConfig={
    appPath:require("./browser.json").appPath||'src', //配置源文件路徑
    dist:'dist',//配置打包路徑
    isDebug:true//配置編譯方式
};
var assets= appConfig.appPath+'/assets/';
var watchPath={
    scripts:[assets+'scripts/**/*.js'],
    styles:[assets+'styles/**/*.css'],
    plugins:[assets+'plugins/**/*.*'],
    images:[assets+'images/**/*.*']
};
gulp.task('main',function(){
    runSequence();
});
gulp.task('clean',function(callback){
    del([appConfig.dist+'/*.*'],callback);
});
gulp.task('scripts',function(){
    var gulpStream=gulp.src(watchPath.scripts,{base:appConfig.appPath});
    if(appConfig.isDebug){
        gulpStream=gulpStream.pipe(uglify());
    }
    return gulpStream.pipe(gulp.dest(appConfig.dist));
    console.log('scripts bulid complete'.green);
});

 8.Bower自動添加引用到首頁。

gulp.task('bower', function () {
  return gulp.src([paths.views.main])
    .pipe(wiredep({
      directory: 'bower_components',
      //exclude: [],
      //ignorePath: '/^(\.\.\/)*\.\./'
      ignorePath: '..'
    }))
    .pipe(gulp.dest('app'));
});

 9.模塊化構建項目，自動刷新瀏覽器

var gulp=require('gulp');
var del=require('del');
var runSequence=require('run-sequence');
var concat=require('gulp-concat');
var uglify=require('gulp-uglify');
var rename=require('gulp-rename');
var colors=require('colors');
var cssnano = require('gulp-cssnano');
var browserSync=require('browser-sync').create();
var wiredep=require("wiredep").stream;
var mainBowerFiles = require('main-bower-files');
var appConfig={
    appPath:require("./bower.json").appPath||'src', //配置源文件路徑
    dist:'dist/',//配置打包路徑
    isDebug:true//配置編譯方式
};
var assets= appConfig.appPath+'/assets';
var bowerPath=assets+"/plugins";
var watchPath={
    scripts:[assets+'/scripts/**/*.js'],
    styles:[assets+'/styles/**/*.css'],
    plugins:[assets+'/plugins/**/*.*'],
    images:[assets+'/images/**/*.*'],
    main:appConfig.appPath+'/index.html',
    views:appConfig.appPath+'/views/**/*.html',
    js:appConfig.appPath+'/js/**/*.js',
    theme:appConfig.appPath+'/theme/**/*.html'
};
gulp.watch(watchPath.scripts,['scripts','reload']);
gulp.watch(watchPath.styles,['styles','reload']);
gulp.watch(watchPath.plugins,['plugins','reload']);
gulp.watch(watchPath.images,['images','reload']);
gulp.watch('./bower.json',['bower','main-bower-files','reload']);
gulp.watch([watchPath.views,watchPath.main],['views','reload']);
gulp.watch(watchPath.js,['js','reload']);
gulp.watch(watchPath.theme,['theme','reload']);

gulp.task('clean',function(){
    del([appConfig.dist+'/*.*']);
    console.log('clean task complete!'.green);
});
gulp.task('scripts',function(){
    var gulpStream=gulp.src(watchPath.scripts,{base:appConfig.appPath});
    if(!appConfig.isDebug){
        gulpStream=gulpStream.pipe(uglify());
    }
    console.log('scripts bulid complete'.green);
    return gulpStream.pipe(gulp.dest(appConfig.dist));    
});
gulp.task('styles',function(){
    var gulpStream=gulp.src(watchPath.styles,{base:appConfig.appPath});
    if(!appConfig.isDebug){
        gulpStream=gulpStream.pipe(cssnano());
    }
    console.log('styles bulid complete'.green);
    return gulpStream.pipe(gulp.dest(appConfig.dist));
});
gulp.task('bower', function () {
  return gulp.src([watchPath.main])
    .pipe(wiredep({
      directory: bowerPath,
      //exclude: [],
      //ignorePath: '/^(\.\.\/)*\.\./'
    }))
    .pipe(gulp.dest(appConfig.appPath));
});
gulp.task('js',function(){
    gulp.src(watchPath.js,{base:appConfig.appPath})
    .pipe(gulp.dest(appConfig.dist));
});
gulp.task('theme',function(){
    gulp.src(watchPath.theme,{base:appConfig.appPath})
    .pipe(gulp.dest(appConfig.dist));
});
gulp.task('views',['bower'],function(){
    gulp.src([watchPath.views,watchPath.main],{base:appConfig.appPath})
    .pipe(gulp.dest(appConfig.dist));
    console.log('Html bulid complete'.green);
});
gulp.task("main-bower-files", function(){
    return gulp.src(mainBowerFiles(), { base: appConfig.appPath })
        .pipe(gulp.dest(appConfig.dist));
});
gulp.task('images',function(){
    gulp.src(watchPath.images,{base:appConfig.appPath})
    .pipe(gulp.dest(appConfig.dist));
});
gulp.task('reload', function () {
    browserSync.reload();
    console.log("模塊重新構建成功".green);
});

gulp.task('serve', ['clean','views','theme','images', 'js','styles', 'scripts','main-bower-files'], function() {
 console.log('Build Complate!Server Strarting......');
 browserSync.init({
        server: {
            baseDir: './dist'
        },       
        port: 8888
    })
});

gulp.task('default', ['serve']);