使用|使用 gulp + seajs + zepto 构建项目使用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 = 'https://www.it610.com/article/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,//删除的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除和的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/下的文件是不做修改，不做处理的，用于客户端缓存，方便读取；