weui/gulpfile.js

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

var path = require('path');
var fs = require('fs');
var gulp = require('gulp');
var less = require('gulp-less');
var header = require('gulp-header');
var tap = require('gulp-tap');
var nano = require('gulp-cssnano');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var comments = require('postcss-discard-comments');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync');
var childProcess = require('child_process');
var pkg = require('./package.json');
var convertCssVar = require('gulp-convert-css-var');
var exec = require('child_process').exec;

var yargs = require('yargs').options({
    w: {
        alias: 'watch',
        type: 'boolean',
    },
    s: {
        alias: 'server',
        type: 'boolean',
    },
    p: {
        alias: 'port',
        type: 'number',
    },
}).argv;

var option = { base: 'src' };
var dist = __dirname + '/dist';

function exec(cmd) {
    return new Promise((resolve, reject) => {
        const process = childProcess.exec(cmd, (error) => {
            if (error) {
                reject(error);
            } else {
                resolve();
            }
        });
        process.stdout.on('data', function(data) {
            console.log(data);
        });
    });
}

function buildStyle() {
    var banner = [
        '/*!',
        ' * WeUI v<%= pkg.version %> (<%= pkg.homepage %>)',
        ' * Copyright <%= new Date().getFullYear() %> Tencent, Inc.',
        ' * Licensed under the <%= pkg.license %> license',
        ' */',
        '',
    ].join('\n');
    return gulp
    .src('src/style/weui.less', option)
    .pipe(sourcemaps.init())
    .pipe(
        less().on('error', function(e) {
            console.error(e.message);
            this.emit('end');
        }),
    )
    .pipe(postcss([autoprefixer(['iOS >= 7', 'Android >= 4.1']), comments()]))
    .pipe(convertCssVar())
    .pipe(header(banner, { pkg: pkg }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(dist))
    .pipe(browserSync.reload({ stream: true }))
    .pipe(
        nano({
            zindex: false,
            autoprefixer: false,
            svgo: false,
        }),
    )
    .pipe(
        rename(function(path) {
            path.basename += '.min';
        }),
    )
    .pipe(gulp.dest(dist));
}
function buildExampleAssets() {
    return gulp
    .src('src/example/**/*.?(png|jpg|gif|js)', option)
    .pipe(gulp.dest(dist))
    .pipe(browserSync.reload({ stream: true }));
}
function buildExampleStyle() {
    return gulp
    .src('src/example/example.less', option)
    .pipe(
        less().on('error', function(e) {
            console.error(e.message);
            this.emit('end');
        }),
    )
    .pipe(postcss([autoprefixer(['iOS >= 7', 'Android >= 4.1'])]))
    .pipe(
        nano({
            zindex: false,
            autoprefixer: false,
        }),
    )
    .pipe(gulp.dest(dist))
    .pipe(browserSync.reload({ stream: true }));
}
function buildExampleHTML() {
    return gulp
    .src('src/example/index.html', option)
    .pipe(
        tap(function(file) {
            var dir = path.dirname(file.path);
            var contents = file.contents.toString();
            contents = contents.replace(
                /<link\s+rel="import"\s+href="(.*)">/gi,
                function(match, $1) {
                    var filename = path.join(dir, $1);
                    var id = path.basename(filename, '.html');
                    var content = fs.readFileSync(filename, 'utf-8');
                    return (
                        '<script type="text/html" id="tpl_' +
                        id +
                        '">\n' +
                        content +
                        '\n</script>'
                    );
                },
            );
            file.contents = new Buffer(contents);
        }),
    )
    .pipe(gulp.dest(dist))
    .pipe(browserSync.reload({ stream: true }));
}

gulp.task('build:style', buildStyle);
gulp.task('build:example:assets', buildExampleAssets);
gulp.task('build:example:style', buildExampleStyle);
gulp.task('build:example:html', buildExampleHTML);

gulp.task('build:example', gulp.parallel('build:example:assets', 'build:example:style', 'build:example:html'));

gulp.task('build', gulp.parallel('build:style', 'build:example'));

gulp.task('tag', function() {
    return new Promise(resolve => {
        const tag = `v${pkg.version}`;
        exec(`git tag ${tag}`).then(resolve);
    });
});

// 参数说明
//  -w: 实时监听
//  -s: 启动服务器
//  -p: 服务器启动端口，默认8080
gulp.task('default', gulp.series('build', function() {
    return new Promise(resolve => {
        if (yargs.s) {
            yargs.p = yargs.p || 8080;
            browserSync.init({
                server: {
                    baseDir: './dist',
                },
                ui: {
                    port: yargs.p + 1,
                    weinre: {
                        port: yargs.p + 2,
                    },
                },
                port: yargs.p,
                startPath: '/example',
            });
            resolve();
        }

        if (yargs.w) {
            var list = [
                {
                    path: 'src/style/**/*',
                    task: buildStyle,
                },
                {
                    path: 'src/example/**/*.?(png|jpg|gif|js)',
                    task: buildExampleAssets,
                },
                {
                    path: 'src/example/example.less',
                    task: buildExampleStyle,
                },
                {
                    path: 'src/example/**/*.html',
                    task: buildExampleHTML,
                },
            ];
            list.forEach((item) => {
                var timeout = null;
                gulp.watch(path.resolve(__dirname, item.path)).on('change', function(path) {
                    clearTimeout(timeout);

                    console.log(path);
                    timeout = setTimeout(() => {
                        item.task();
                    }, 300);
                });
            });
            resolve();
        }

        resolve();
    });
}));