|
|
|
/**
|
|
|
|
* gulp
|
|
|
|
* author: xuqi(qi.xu@yoho.cn)
|
|
|
|
* date: 2015/9/30
|
|
|
|
*/
|
|
|
|
|
|
|
|
var gulp = require('gulp');
|
|
|
|
var webpack = require('webpack-stream');
|
|
|
|
|
|
|
|
var postcss = require('gulp-postcss');
|
|
|
|
var sourcemaps = require('gulp-sourcemaps');
|
|
|
|
var cssnano = require('gulp-cssnano');
|
|
|
|
|
|
|
|
var named = require('vinyl-named');
|
|
|
|
|
|
|
|
var cp = require('child_process');
|
|
|
|
var fs = require('fs');
|
|
|
|
var config = JSON.parse(fs.readFileSync('./package.json').toString());
|
|
|
|
var root = `dist/${config.name}/`;
|
|
|
|
|
|
|
|
var distDir = {
|
|
|
|
js: root + config.version,
|
|
|
|
css: root + config.version,
|
|
|
|
img: root + 'assets/img',
|
|
|
|
font: root + 'assets/font'
|
|
|
|
};
|
|
|
|
|
|
|
|
gulp.task('default', ['postcss-dev', 'postcss-watch', 'js', 'server']);
|
|
|
|
|
|
|
|
|
|
|
|
//根据环境变量生成postcss插件配置
|
|
|
|
function postcssEnvPlugin(env) {
|
|
|
|
var sprites = {
|
|
|
|
spritesmith: {
|
|
|
|
padding: 2
|
|
|
|
},
|
|
|
|
groupBy: function(file) {
|
|
|
|
|
|
|
|
// 根据目录分组，防止合并后的图片太大
|
|
|
|
var group = file.url.split('/')[1];
|
|
|
|
|
|
|
|
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,
|
|
|
|
plugins;
|
|
|
|
|
|
|
|
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
|
|
|
|
};
|
|
|
|
|
|
|
|
Object.assign(sprites, {
|
|
|
|
basePath: distDir.img,
|
|
|
|
stylesheetPath: distDir.css,
|
|
|
|
spritePath: distDir.img
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
plugins = [
|
|
|
|
require('autoprefixer')({
|
|
|
|
browsers: ['not ie < 8']
|
|
|
|
}),
|
|
|
|
require('precss'),
|
|
|
|
require('postcss-assets')(assets),
|
|
|
|
require('postcss-sprites').default(sprites),
|
|
|
|
require('postcss-calc'),
|
|
|
|
require('postcss-opacity'),
|
|
|
|
|
|
|
|
//可选
|
|
|
|
require('postcss-use')({
|
|
|
|
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
|
|
|
|
})
|
|
|
|
];
|
|
|
|
|
|
|
|
//正式环境为assets和img加no-cache
|
|
|
|
if (env === 'PRO') {
|
|
|
|
plugins.push(require('postcss-cachebuster')({
|
|
|
|
imagesPath: '/' + distDir.img,
|
|
|
|
cssPath: '/' + distDir.css
|
|
|
|
}))
|
|
|
|
}
|
|
|
|
|
|
|
|
return plugins;
|
|
|
|
}
|
|
|
|
|
|
|
|
//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))
|
|
|
|
});
|
|
|
|
|
|
|
|
gulp.task('js', function() {
|
|
|
|
return gulp.src('./index.js')
|
|
|
|
.pipe(named())
|
|
|
|
.pipe(webpack(require('./webpack.config.js')))
|
|
|
|
.pipe(gulp.dest(distDir.js))
|
|
|
|
});
|
|
|
|
|
|
|
|
//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))
|
|
|
|
});
|
|
|
|
|
|
|
|
//生成发布目录，可用于上传测试机
|
|
|
|
gulp.task('ge', ['assets', 'postcss-pro', 'js']);
|
|
|
|
|
|
|
|
//server
|
|
|
|
gulp.task('server', () => {
|
|
|
|
cp.exec('npm run start', (err, stdout, stderr) => {
|
|
|
|
if (err) {
|
|
|
|
console.log(`exec error: ${err}`);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}); |
|
|
\ No newline at end of file |
...
|
...
|
|
