使用 gulp + seajs + zepto 構建項目詳情 - less,seajs,gulp,zepto Jamie_0912 博客

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

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

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

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

二、使用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 如下圖

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

四、編寫配置文件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-...
下面對各個任務做個簡單解釋：

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