使用 gulp + seajs + zepto 构建项目

最近使用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/下的文件是不做修改，不做处理的，用于客户端缓存，方便读取；

2.seajs是按模块按需加载的，在define的时候，可以给模块定义名称，用来调用（如下图），这样在gulp后的js文件基本不会有问题；

六、由于使用的是less，所以在开发中可以使用gulp实时刷新的插件（gulp-connect），用户方便查看网页

也可以使用工具，将less生成css文件，我用的工具是WinLess，感觉很好用，工具安装文件地址：http://pan.baidu.com/s/1slEtog1，同样是msi文件，最后用管理员模式命令行启动