|
|
/**
|
|
|
* Yohobuy 构建脚本
|
|
|
* @author: xuqi<qi.xu@yoho.cn>
|
|
|
* @date: 2016/4/25
|
|
|
*/
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
const gulp = require('gulp');
|
|
|
const postcss = require('gulp-postcss');
|
|
|
const sourcemaps = require('gulp-sourcemaps');
|
|
|
const cssnano = require('gulp-cssnano');
|
|
|
|
|
|
const env = {
|
|
|
dev: Symbol('development'),
|
|
|
pro: Symbol('production')
|
|
|
};
|
|
|
|
|
|
const config = require('../package.json');
|
|
|
const ftpConfig = {
|
|
|
host: '218.94.75.50',
|
|
|
user: 'php',
|
|
|
pass: 'yoho9646'
|
|
|
};
|
|
|
const distRoot = `dist/${config.name}`;
|
|
|
const dist = {
|
|
|
js: `${distRoot}/${config.version}`,
|
|
|
css: `${distRoot}/${config.version}`,
|
|
|
assets: `${distRoot}/assets`,
|
|
|
img: `${distRoot}/assets/img`,
|
|
|
font: `${distRoot}/assets/font`
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* postcss plugins for both dev and pro
|
|
|
* @parem et Symbol
|
|
|
*/
|
|
|
const postcssPlugin = (et) => {
|
|
|
var sprites = {
|
|
|
spritesmith: {
|
|
|
padding: 2
|
|
|
},
|
|
|
groupBy(file) {
|
|
|
var group = file.url.split('/')[0];
|
|
|
|
|
|
group = group === '' ? 'yo' : group;
|
|
|
|
|
|
return group ? Promise.resolve(group) : Promise.reject(group);
|
|
|
}
|
|
|
},
|
|
|
assets,
|
|
|
plugins;
|
|
|
|
|
|
// assets & sprites config in both dev and pro
|
|
|
if (et === env.pro) {
|
|
|
assets = {
|
|
|
loadPaths: [dist.img, dist.font],
|
|
|
};
|
|
|
|
|
|
Object.assign(sprites, {
|
|
|
basePath: dist.img,
|
|
|
stylesheetPath: dist.css,
|
|
|
spritePath: dist.img
|
|
|
});
|
|
|
} else if (et === env.dev) {
|
|
|
assets = {
|
|
|
loadPaths: ['img/', 'font/'],
|
|
|
relativeTo: 'css/'
|
|
|
};
|
|
|
|
|
|
Object.assign(sprites, {
|
|
|
basePath: 'img/',
|
|
|
stylesheetPath: 'css/',
|
|
|
spritePath: 'img/'
|
|
|
});
|
|
|
};
|
|
|
|
|
|
plugins = [
|
|
|
require('autoprefixer')({
|
|
|
browsers: ['> 1%']
|
|
|
}),
|
|
|
require('precss'),
|
|
|
require('postcss-sprites').default(sprites),
|
|
|
require('postcss-assets')(assets),
|
|
|
require('postcss-calc'),
|
|
|
require('postcss-opacity'),
|
|
|
|
|
|
//可选
|
|
|
require('postcss-use')({
|
|
|
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
|
|
|
})
|
|
|
];
|
|
|
|
|
|
if (et === env.pro) {
|
|
|
plugins.push(require('postcss-cachebuster')({
|
|
|
imagesPath: `/${dist.img}`,
|
|
|
cssPath: `/${dist.css}`
|
|
|
}));
|
|
|
}
|
|
|
return plugins;
|
|
|
};
|
|
|
|
|
|
// postcss compile in dev
|
|
|
gulp.task('postcss-dev', () => {
|
|
|
return gulp.src('scss/index.css')
|
|
|
.pipe(sourcemaps.init())
|
|
|
.pipe(postcssPlugin(env.dev))
|
|
|
.pipe(sourcemaps.write('.'))
|
|
|
.pipe(gulp.dest('css/'));
|
|
|
});
|
|
|
|
|
|
// postcss file watch
|
|
|
gulp.task('postcss-watch', () => {
|
|
|
gulp.watch('scss/**/*.css', ['postcss-dev']);
|
|
|
});
|
|
|
|
|
|
// copy assets
|
|
|
gulp.task('assets', ['img', 'font']);
|
|
|
|
|
|
// copy img
|
|
|
gulp.task('img', () => {
|
|
|
return gulp.src('img/**/*')
|
|
|
.pipe(gulp.dest(dist.img));
|
|
|
});
|
|
|
|
|
|
//copy font
|
|
|
gulp.task('font', () => {
|
|
|
return gulp.src('font/*')
|
|
|
.pipe(gulp.dest(dist.font));
|
|
|
});
|
|
|
|
|
|
// postcss compile in pro
|
|
|
gulp.task('postcss', ['assets'], () => {
|
|
|
return gulp.src('scss/index.css')
|
|
|
.pipe(postcssPlugin(env.pro))
|
|
|
.pipe(cssnano())
|
|
|
.pipe(gulp.dest(dist.css));
|
|
|
}); |
|
|
\ No newline at end of file |
...
|
...
|
|