使用 gulp + seajs + zepto 構建項目

最近使用gulp工具，將公司現有項目從新構建了下，有許多大改動，繞了許多坑，我不擅長表達，只能把我如今總結出的對的和比較深入的應該注意的幾點記錄下來，省得之後本身都忘記了。
一，基本環境的搭建，安裝nodejs、npm。（給新手看得，會的直接跳過）

先下載安裝程序：http://nodejs.cn/download/
一、Windows 安裝包(.msi)；
二、安裝msi，這裏最好使用管理員命令行來進行安裝

三、安裝完後配置環境變量（注意新版的node會幫忙修改好環境變量）
新建一個用戶變量：
     變量名：NODE_PATH
     值：C:\Program Files\nodejs\node_modules
系統變量修改（node安裝時會給改好）
     變量名：path
     值：添加 C:\Program Files\nodejs

三、檢測PATH環境變量是否配置了Node.js，點擊開始=》運行=》輸入"cmd" => 輸入命令"path"
四、在命令提示符窗口輸入 node -v 和 npm -v 檢查安裝的版本號

2、使用npm安裝gulp已經各類須要的gulp包

1.先生成package.json ，命令： npm init  
2.安裝gulp，全局安裝   命令： npm install gulp -g
3.安裝所須要的gulp包：
  npm install gulp gulp-clean gulp-htmlmin gulp-imagemin gulp-less gulp-minify-css gulp-rename gulp-rev gulp-rev-collector gulp-seajs-concat gulp-seajs-transport gulp-sourcemaps gulp-uglify merge-stream yargs --save-dev
4.安裝完成後，package.json的文件內容，其中devDependencies 以下圖

3、目錄結構，這個東西，根據本身的來的，在配置gulpfile文件的時候對應好就行

4、編寫配置文件gulpfile，我直接上代碼吧，而後再解釋

var gulp = require('gulp'),
     yargs = require('yargs').argv,//獲取運行gulp命令時附加的命令行參數
     imagemin = require('gulp-imagemin'),        //圖片壓縮
    less = require('gulp-less'),
    minifyCss = require('gulp-minify-css'),
    sourcemaps = require('gulp-sourcemaps'),
    jshint = require('gulp-jshint'),            //js檢查
    transport = require('gulp-seajs-transport'), //合併seajs用
    concat = require('gulp-seajs-concat'),         //合併seajs用
    uglify = require('gulp-uglify'),            //js壓縮
    merge = require('merge-stream'),            //合併多個流
    replace = require('gulp-replace-task'),//對文件中的字符串進行替換
    htmlmin = require('gulp-htmlmin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean');
    var rev = require('gulp-rev');
    var revCollector = require('gulp-rev-collector');

gulp.task('allLess', function(){ 
    return gulp.src(['./assets/less/*.less','!./assets/less/reset.less'])
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(gulp.dest('./assets/css'))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist/css/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./dist/rev/css'));
});

gulp.task('image', function(){
    var imgSrc = './assets/image/**/*',
        imgDst = './dist/image';
    gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
});

gulp.task('seajs', function(){
    return merge(
        gulp.src('./assets/scripts/!(lib)/**/*.js', {base: './assets/scripts'})
            .pipe(transport())
            .pipe(concat({
                base: './assets/scripts'
            }))
            .pipe(gulp.dest('./dist/js_tmp'))
    );
})
gulp.task('scripts_uglify', ['seajs'], function(cb){
    return gulp.src([
            './dist/js_tmp/app/**/*.js'
        ], {base : './dist/js_tmp'})
            .pipe(uglify({
                mangle:{
                    except: ['require', 'exports', 'module', '$', 'Zepto', 'jQuery', '_hmt'] //這幾個變量不壓縮
                }
            }))
            .pipe(rev())
            .pipe(gulp.dest('./dist/scripts'))
            .pipe(rev.manifest())
            .pipe(gulp.dest('./dist/rev/js'))
});

//html 壓縮
gulp.task('html', ['allLess', 'scripts_uglify'], function () {
    var options = {
        removeComments: true,  //清除HTML註釋
        collapseWhitespace: true,  //壓縮HTML
        collapseBooleanAttributes: true,  //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,  //刪除全部空格做屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,  //刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,  //刪除<style>和<link>的type="text/css"
        minifyJS: true,  //壓縮頁面JS
        minifyCSS: true  //壓縮頁面CSS
    };
    gulp.src(['./dist/rev/**/*.json', './assets/*.html'])
        .pipe(revCollector({
            replaceReved: true,
            dirReplacements: {
                'css/': 'css/',
                'scripts/': 'scripts/'
            }
        }))
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./dist'));    
});

gulp.task('watch', function(){
    gulp.watch('./assets/*.html',['html']);
    gulp.watch('./assets/less/*.less',['allLess']);
    gulp.watch('./assets/scripts/**/*.js',['scripts_uglify']);
    gulp.watch('./assets/image/**',['image']);
});

//清空圖片、樣式、js
gulp.task('clean', function(){
    gulp.src([
        './dist/css/!(font)', 
        './dist/scripts/!(lib)', 
        './dist/*.html', 
        './dist/js_tmp',
        './dist/image', 
        './dist/rev', 
        './assets/css/!(font)'
        ], {read: false})
        .pipe(clean());
});

gulp.task('default', ['clean'], function(){
    gulp.start('allLess', 'scripts_uglify', 'image', 'html');
});

首先是頂部的那一堆變量的聲明，其實可使用個更簡單的方式，gulp-load-plugins，這個插件，使用方法入口：https://github.com/MRuy/gulp-...
下面對各個任務作個簡單解釋：

5、在js代碼中須要注意的事情，這個很重要！！
1.首先是seajs的配置，我把seajs.config的配置寫在了script/lib/下的sea.js文件裏了，同時還有接口服務器地址配置也在這裏。這是由於公司項目環境致使測試環境和正式環境的配置文件都是穩定不變得，即便在開發中也是這樣，以前在gulp的配置文件gulpfile.js中也強調過，這個script/lib/下的文件是不作修改，不作處理的，用於客戶端緩存，方便讀取；

2.seajs是按模塊按需加載的，在define的時候，能夠給模塊定義名稱，用來調用（以下圖），這樣在gulp後的js文件基本不會有問題；

6、因爲使用的是less，因此在開發中可使用gulp實時刷新的插件（gulp-connect），用戶方便查看網頁

也可使用工具，將less生成css文件，我用的工具是WinLess，感受很好用，工具安裝文件地址：http://pan.baidu.com/s/1slEtog1，一樣是msi文件，最後用管理員模式命令行啓動