使用 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,  //省略布尔属性的值  ==> 
        removeEmptyAttributes: true,  //删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: true,  //删除
                    
                    

你可能感兴趣的:(zepto,gulp,seajs,less)