butterandfly / project_9

Blog & Remark
0 stars 0 forks source link

使用gulp生成组件的文件 #160

Open butterandfly opened 10 years ago

butterandfly commented 10 years ago

因为要使用到命令行参数,所以你需要使用yargs或gulp-util:

var argv = require('yargs').argv

具体见:http://stackoverflow.com/questions/23023650/is-it-possible-to-pass-a-flag-to-gulp-to-have-it-run-tasks-in-different-ways

butterandfly commented 10 years ago

然后就可以建立一个类似的任务:

gulp.task('comp', function() {
    // component名称,从参数里获得
    var compName = argv.name;

    // 命令行没有输入名称的情况直接退出该任务
    if (!compName || compName === '') {
        gutil.log('请输入compenent的名称');
        return;
    }

    // 存放components的路径
    var basePath = './components/';
    // 模板的路径
    var baseTplPath = 'dev_tools/';
    // 当前component的路径
    var compPath = path.join(basePath, compName);
    // 当前component的tmpl文件的路径
    var compTplPath = path.join(compPath, compName + '.tmpl');

    // component对象,里面存放的信息用于模板编译时转换
    var compTplObject = {
        'compName': compName,
        'compNameDash': camelToDash(compName),
        'compTplPath': compTplPath
    }

    var suffixes = ['js', 'scss', 'tmpl'];
    var i, len;
    for (i = 0, len = suffixes.length; i < len; i++) {
        // 后缀
        var suffix = suffixes[i];
        // 模板文件
        var tplFile = path.join(baseTplPath, 'comp.' + suffix)
        // 目标文件名称
        var destFileName = compName + '.' + suffix;

        gulp.src(tplFile)
            .pipe(concat(destFileName))
            .pipe(template(compTplObject))
            .pipe(gulp.dest(compPath));
    }
})