gulpfile.js 6.95 KB
/**
 * 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 = JSON.parse(fs.readFileSync('./package.json').toString());

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,
    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: ['> 1%']
        }),
        require('precss'),
        require('postcss-assets')(assets),
        require('postcss-sprites').default(sprites),
        require('postcss-calc'),
        require('postcss-opacity'),
        require('postcss-pxtorem')({
            rootValue: 40,
            unitPrecision: 5, // 保留5位小数字
            minPixelValue: 2, // 小于 2px 时,不转换, 单位为 PX 大写的时候不转换
            selectorBlackList: [], // 选择器黑名单,可以使用正则
            propWhiteList: [] // 属性名称为空,表示替换所有属性的值
        }),

        //可选
        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))
});

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