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));
+});