Authored by xuqi

postcss build

/**
* 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
... ...