|
|
|
/**
|
|
|
|
* GULP-FILE
|
|
|
|
* author: xuqi(qi.xu@yoho.cn)
|
|
|
|
* date: 2015/9/30
|
|
|
|
* 根据 PC 版修改为 H5 版， 毕凯
|
|
|
|
*/
|
|
|
|
|
|
|
|
var gulp = require('gulp'),
|
|
|
|
cp = require('child_process');
|
|
|
|
|
|
|
|
var fs = require('fs'),
|
|
|
|
ftp = require('gulp-ftp'),
|
|
|
|
gutil = require('gulp-util'),
|
|
|
|
uglify = require('gulp-uglify'),
|
|
|
|
Package = require('father').SpmPackage,
|
|
|
|
transport = require('gulp-spm'),
|
|
|
|
concat = require('gulp-concat');
|
|
|
|
|
|
|
|
var postcss = require('gulp-postcss');
|
|
|
|
var sourcemaps = require('gulp-sourcemaps');
|
|
|
|
var cssnano = require('gulp-cssnano');
|
|
|
|
|
|
|
|
var config = require('./package');
|
|
|
|
|
|
|
|
var rootDist = 'dist/myohobuy/',
|
|
|
|
ftpConfig = {
|
|
|
|
host: '218.94.75.58',
|
|
|
|
user: 'php',
|
|
|
|
pass: 'yoho9646'
|
|
|
|
};
|
|
|
|
|
|
|
|
var distDir = {
|
|
|
|
js: rootDist + config.version,
|
|
|
|
css: rootDist + config.version,
|
|
|
|
img: rootDist + 'assets/img',
|
|
|
|
font: rootDist + 'assets/font'
|
|
|
|
};
|
|
|
|
|
|
|
|
gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']);
|
|
|
|
|
|
|
|
|
|
|
|
//根据环境变量生成postcss插件配置
|
|
|
|
function postcssEnvPlugin(env) {
|
|
|
|
var sprites = {
|
|
|
|
spritesmith: {
|
|
|
|
padding: 10
|
|
|
|
},
|
|
|
|
groupBy: function(file) {
|
|
|
|
|
|
|
|
// 根据目录分组，防止合并后的图片太大
|
|
|
|
var group = file.url.split('/')[1];
|
|
|
|
|
|
|
|
file.retina = true; // H5 强制所有图片都是用二倍图
|
|
|
|
return group ? Promise.resolve(group) : Promise.reject();
|
|
|
|
},
|
|
|
|
filterBy: function(file) {
|
|
|
|
|
|
|
|
//使用resolve转化后静态资源生成../img或者../assets/img/的路径
|
|
|
|
if (/\/img/.test(file.url) || /data:image/.test(file.url)) {
|
|
|
|
return Promise.reject();
|
|
|
|
}
|
|
|
|
return Promise.resolve();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
assets;
|
|
|
|
|
|
|
|
if (env === 'DEV') {
|
|
|
|
assets = {
|
|
|
|
loadPaths: ['font/', 'img/'],
|
|
|
|
relativeTo: 'css/'
|
|
|
|
};
|
|
|
|
|
|
|
|
Object.assign(sprites, {
|
|
|
|
basePath: './img',
|
|
|
|
stylesheetPath: './css',
|
|
|
|
spritePath: './img'
|
|
|
|
});
|
|
|
|
} else if (env === 'PRO') {
|
|
|
|
assets = {
|
|
|
|
loadPaths: [distDir.img, distDir.font],
|
|
|
|
relativeTo: distDir.css,
|
|
|
|
cachebuster: function(filePath, urlPathname) {
|
|
|
|
|
|
|
|
//只给字体加no-cache
|
|
|
|
if (/font\//.test(urlPathname)) {
|
|
|
|
return fs.statSync(filePath).mtime.getTime().toString(16);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Object.assign(sprites, {
|
|
|
|
basePath: distDir.img,
|
|
|
|
stylesheetPath: distDir.css,
|
|
|
|
spritePath: distDir.img
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return [
|
|
|
|
require('precss'),
|
|
|
|
require('postcss-assets')(assets),
|
|
|
|
require('postcss-sprites').default(sprites),
|
|
|
|
require('postcss-calc'),
|
|
|
|
require('postcss-pxtorem')({
|
|
|
|
rootValue: 40,
|
|
|
|
unitPrecision: 5, // 保留5位小数字
|
|
|
|
minPixelValue: 2, // 小于 2px 时，不转换, 单位为 PX 大写的时候不转换
|
|
|
|
selectorBlackList: [], // 选择器黑名单，可以使用正则
|
|
|
|
propWhiteList: [] // 属性名称为空，表示替换所有属性的值
|
|
|
|
}),
|
|
|
|
require('autoprefixer')({
|
|
|
|
browsers: ['> 1%']
|
|
|
|
}),
|
|
|
|
|
|
|
|
//可选
|
|
|
|
require('postcss-use')({
|
|
|
|
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
|
|
|
|
})
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
|
|
|
//Postcss开发环境
|
|
|
|
gulp.task('postcss-dev', function() {
|
|
|
|
return gulp.src('sass/index.css')
|
|
|
|
.pipe(sourcemaps.init())
|
|
|
|
.pipe(postcss(postcssEnvPlugin('DEV')))
|
|
|
|
.pipe(sourcemaps.write('.'))
|
|
|
|
.pipe(gulp.dest('css/'))
|
|
|
|
});
|
|
|
|
|
|
|
|
gulp.task('postcss-watch', function() {
|
|
|
|
gulp.watch('sass/**/*.css', ['postcss-dev']);
|
|
|
|
});
|
|
|
|
|
|
|
|
//Postcss正式环境生成
|
|
|
|
gulp.task('postcss-pro', ['assets'], function() {
|
|
|
|
return gulp.src('sass/index.css')
|
|
|
|
.pipe(postcss(postcssEnvPlugin('PRO')))
|
|
|
|
.pipe(cssnano())
|
|
|
|
.pipe(gulp.dest(distDir.css))
|
|
|
|
});
|
|
|
|
|
|
|
|
// start spm server
|
|
|
|
gulp.task('spm-doc', function() {
|
|
|
|
var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001，H5 用8000, 跑两个服务器，不冲突
|
|
|
|
|
|
|
|
// sd.stdout.on('data', function(data) {
|
|
|
|
// console.log(data);
|
|
|
|
// });
|
|
|
|
|
|
|
|
sd.stderr.on('data', function(data) {
|
|
|
|
console.log(data);
|
|
|
|
});
|
|
|
|
|
|
|
|
sd.on('exit', function(code) {
|
|
|
|
console.log('process spm doc exit with code ' + code);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
//生成发布目录，可用于上传测试机
|
|
|
|
gulp.task('ge', ['assets', 'postcss-pro', 'build']);
|
|
|
|
|
|
|
|
//发布
|
|
|
|
gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {
|
|
|
|
var ftpstream = ftp(ftpConfig);
|
|
|
|
|
|
|
|
return gulp.src('dist/**/')
|
|
|
|
.pipe(ftpstream)
|
|
|
|
.pipe(gutil.noop());
|
|
|
|
});
|
|
|
|
|
|
|
|
//font+img->dist/assets
|
|
|
|
gulp.task('assets', ['img', 'font']);
|
|
|
|
|
|
|
|
gulp.task('img', function() {
|
|
|
|
return gulp.src('img/**/*')
|
|
|
|
.pipe(gulp.dest(distDir.img));
|
|
|
|
});
|
|
|
|
|
|
|
|
gulp.task('font', function() {
|
|
|
|
return gulp.src('font/*')
|
|
|
|
.pipe(gulp.dest(distDir.font))
|
|
|
|
});
|
|
|
|
|
|
|
|
//spm build
|
|
|
|
gulp.task('build', ['libs', 'business']);
|
|
|
|
|
|
|
|
//libs
|
|
|
|
gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']);
|
|
|
|
|
|
|
|
gulp.task('pre-libs', function() {
|
|
|
|
var obj = {
|
|
|
|
name: '',
|
|
|
|
version: config.version,
|
|
|
|
spm: config.spm
|
|
|
|
};
|
|
|
|
var packages = [],
|
|
|
|
libsjs = '';
|
|
|
|
|
|
|
|
var libCon, key, i;
|
|
|
|
|
|
|
|
var pkg;
|
|
|
|
|
|
|
|
obj.spm.main = 'libs.js';
|
|
|
|
obj.spm.buildArgs = '--idleading {{}} --include all';
|
|
|
|
|
|
|
|
libCon = JSON.stringify(obj);
|
|
|
|
|
|
|
|
fs.renameSync('package.json', 'package.bak.json');
|
|
|
|
fs.writeFileSync('package.json', libCon);
|
|
|
|
|
|
|
|
for (key in obj.spm.dependencies) {
|
|
|
|
if (obj.spm.inside && obj.spm.inside[key]) {
|
|
|
|
packages.push(obj.spm.inside[key]);
|
|
|
|
} else {
|
|
|
|
packages.push(key);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
for (i = 0; i < packages.length; i++) {
|
|
|
|
libsjs += 'require("' + packages[i] + '");';
|
|
|
|
}
|
|
|
|
|
|
|
|
fs.writeFileSync('libs.js', libsjs); //重写入口文件
|
|
|
|
|
|
|
|
pkg = new Package(__dirname);
|
|
|
|
|
|
|
|
return gulp.src(pkg.main)
|
|
|
|
.pipe(transport({
|
|
|
|
pkg: pkg
|
|
|
|
}))
|
|
|
|
.pipe(gulp.dest(distDir.js));
|
|
|
|
});
|
|
|
|
|
|
|
|
gulp.task('concat-min-libs', ['pre-libs'], function() {
|
|
|
|
var path = distDir.js + '/libs.js';
|
|
|
|
var jsStr = fs.readFileSync(path).toString();
|
|
|
|
|
|
|
|
fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
|
|
|
|
|
|
|
|
return gulp.src(['js/plugin/sea.js', distDir.js + '/libs.js'])
|
|
|
|
.pipe(concat('lib.js'))
|
|
|
|
.pipe(uglify())
|
|
|
|
.pipe(gulp.dest(distDir.js));
|
|
|
|
});
|
|
|
|
|
|
|
|
gulp.task('clear-libs', ['concat-min-libs'], function() {
|
|
|
|
fs.renameSync('package.bak.json', 'package.json');
|
|
|
|
fs.unlinkSync('./libs.js');
|
|
|
|
fs.unlinkSync(distDir.js + '/libs.js');
|
|
|
|
});
|
|
|
|
|
|
|
|
gulp.task('business', ['libs'], function() {
|
|
|
|
var pkg = new Package(__dirname);
|
|
|
|
|
|
|
|
return gulp.src(pkg.main)
|
|
|
|
.pipe(transport({
|
|
|
|
pkg: pkg
|
|
|
|
}))
|
|
|
|
.pipe(concat('index-debug.js'))
|
|
|
|
.pipe(gulp.dest(distDir.js))
|
|
|
|
.pipe(uglify())
|
|
|
|
.pipe(concat('index.js'))
|
|
|
|
.pipe(gulp.dest(distDir.js));
|
|
|
|
}); |
...
|
...
|
|
