首页 文章

是否有可能将标志传递给Gulp以使其以不同方式运行任务?

提问于
浏览
354

通常在Gulp任务中看起来像这样:

gulp.task('my-task', function() {
    return gulp.src(options.SCSS_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

是否可以将命令行标志传递给gulp(这不是一项任务)并让它根据它有条件地运行任务?例如

$ gulp my-task -a 1

然后在我的gulpfile.js中:

gulp.task('my-task', function() {
        if (a == 1) {
            var source = options.SCSS_SOURCE;
        } else {
            var source = options.OTHER_SOURCE;
        }
        return gulp.src(source)
            .pipe(sass({style:'nested'}))
            .pipe(autoprefixer('last 10 version'))
            .pipe(concat('style.css'))
            .pipe(gulp.dest(options.SCSS_DEST));
});

11 回答

  • 4

    Gulp不提供任何类型的util,但你可以使用众多命令args解析器之一 . 我喜欢yargs . 应该:

    var argv = require('yargs').argv;
    
    gulp.task('my-task', function() {
        return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
            .pipe(sass({style:'nested'}))
            .pipe(autoprefixer('last 10 version'))
            .pipe(concat('style.css'))
            .pipe(gulp.dest(options.SCSS_DEST));
    });
    

    您还可以将它与gulp-if组合以有条件地管道流,这对于dev与prod构建非常有用:

    var argv = require('yargs').argv,
        gulpif = require('gulp-if'),
        rename = require('gulp-rename'),
        uglify = require('gulp-uglify');
    
    gulp.task('my-js-task', function() {
      gulp.src('src/**/*.js')
        .pipe(concat('out.js'))
        .pipe(gulpif(argv.production, uglify()))
        .pipe(gulpif(argv.production, rename({suffix: '.min'})))
        .pipe(gulp.dest('dist/'));
    });
    

    并拨打 gulp my-js-taskgulp my-js-task --production .

  • 2

    Edit

    gulp-utildeprecated并且应该避免,因此建议使用minimist,而 gulp-util 已使用 .

    所以我在gulpfile中更改了一些行以删除 gulp-util

    var argv = require('minimist')(process.argv.slice(2));
    
    gulp.task('styles', function() {
      return gulp.src(['src/styles/' + (argv.theme || 'main') + '.scss'])
        …
    });
    

    Original

    在我的项目中,我使用以下标志:

    gulp styles --theme literature
    

    Gulp为此提供了一个对象 gulp.env . 它在较新版本中已被弃用,因此您必须使用gulp-util . 任务看起来像这样:

    var util = require('gulp-util');
    
    gulp.task('styles', function() {
      return gulp.src(['src/styles/' + (util.env.theme ? util.env.theme : 'main') + '.scss'])
        .pipe(compass({
            config_file: './config.rb',
            sass   : 'src/styles',
            css    : 'dist/styles',
            style  : 'expanded'
    
        }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'ff 17', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(livereload(server))
        .pipe(gulp.dest('dist/styles'))
        .pipe(notify({ message: 'Styles task complete' }));
    });
    

    所有子任务期间都可以使用环境设置 . 所以我也可以在监视任务上使用这个标志:

    gulp watch --theme literature
    

    我的风格任务也有效 .

    Ciao Ralf

  • 32

    这是我找到的快速配方:

    gulpfile.js

    var gulp   = require('gulp');
    
    // npm install gulp yargs gulp-if gulp-uglify
    var args   = require('yargs').argv;
    var gulpif = require('gulp-if');
    var uglify = require('gulp-uglify');
    
    var isProduction = args.env === 'production';
    
    gulp.task('scripts', function() {
      return gulp.src('**/*.js')
        .pipe(gulpif(isProduction, uglify())) // only minify if production
        .pipe(gulp.dest('dist'));
    });
    

    CLI

    gulp scripts --env production
    

    Original Ref(不再提供):https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-params-from-cli.md

    替代最小化

    来自更新参考:https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md

    gulpfile.js

    // npm install --save-dev gulp gulp-if gulp-uglify minimist
    
    var gulp = require('gulp');
    var gulpif = require('gulp-if');
    var uglify = require('gulp-uglify');
    
    var minimist = require('minimist');
    
    var knownOptions = {
      string: 'env',
      default: { env: process.env.NODE_ENV || 'production' }
    };
    
    var options = minimist(process.argv.slice(2), knownOptions);
    
    gulp.task('scripts', function() {
      return gulp.src('**/*.js')
        .pipe(gulpif(options.env === 'production', uglify())) // only minify if production
        .pipe(gulp.dest('dist'));
    });
    

    CLI

    gulp scripts --env production
    
  • 100

    有一种非常简单的方法可以在不解析参数的情况下执行 on/off 标志 . gulpfile.js 只是一个像其他文件一样执行的文件,所以你可以这样做:

    var flags = {
      production: false
    };
    
    gulp.task('production', function () {
      flags.production = true;
    });
    

    并使用像 gulp-if 之类的东西来有条件地执行一个步骤

    gulp.task('build', function () {
      gulp.src('*.html')
        .pipe(gulp_if(flags.production, minify_html()))
        .pipe(gulp.dest('build/'));
    });
    

    执行 gulp build 将生成一个不错的html,而 gulp production build 将缩小它 .

  • 39

    如果你有一些严格的(有序的!)参数,那么你可以通过检查 process.argv 来获得它们 .

    var args = process.argv.slice(2);
    
    if (args[0] === "--env" && args[1] === "production");
    

    执行它: gulp --env production

    ...但是,我认为这太严格而且不防弹!所以,我摆弄了一下......最后得到了这个效用函数:

    function getArg(key) {
      var index = process.argv.indexOf(key);
      var next = process.argv[index + 1];
      return (index < 0) ? null : (!next || next[0] === "-") ? true : next;
    }
    

    它吃一个参数名称,并将在 process.argv 中搜索它 . 如果没有找到任何东西,它会吐出 null . 否则,如果它们没有下一个参数,或者下一个参数是一个命令而不是一个值(我们用破折号不同),则返回 true . (那个's because the key exist, but there'只是没有 Value ) . 如果之前的所有情况都会失败,那么下一个参数值就是我们得到的 .

    > gulp watch --foo --bar 1337 -boom "Foo isn't equal to bar."

    getArg("--foo") // => true
    getArg("--bar") // => "1337"
    getArg("-boom") // => "Foo isn't equal to bar."
    getArg("--404") // => null
    

    好的,现在已经足够......这是一个使用gulp的简单示例:

    var gulp = require("gulp");
    var sass = require("gulp-sass");
    var rename = require("gulp-rename");
    
    var env = getArg("--env");
    
    gulp.task("styles", function () {
      return gulp.src("./index.scss")
      .pipe(sass({
        style: env === "production" ? "compressed" : "nested"
      }))
      .pipe(rename({
        extname: env === "production" ? ".min.css" : ".css"
      }))
      .pipe(gulp.dest("./build"));
    });
    

    跑吧 gulp --env production

  • 514

    我构建了一个插件,用于将命令行中的参数注入任务回调 .

    gulp.task('mytask', function (production) {
      console.log(production); // => true
    });
    
    // gulp mytask --production
    

    https://github.com/stoeffel/gulp-param

    如果有人发现了错误或有改进,我很乐意合并PR .

  • 1

    如果你正在使用打字稿( gulpfile.ts ),那么为 yargs 做这个( Build 在@Caio Cunha的优秀答案https://stackoverflow.com/a/23038290/1019307以及上面的其他评论):

    安装

    npm install --save-dev yargs
    
    typings install dt~yargs --global --save
    

    .ts文件

    将其添加到.ts文件:

    import { argv } from 'yargs';
    
    ...
    
      let debug: boolean = argv.debug;
    

    这必须在每个.ts文件中单独完成(即使是导入 gulpfile.ts/jstools/tasks/project 文件) .

    gulp build.dev --debug
    

    或者 npm 将arg传递给gulp:

    npm run build.dev -- --debug
    
  • 55

    从命令行传递参数

    // npm install --save-dev gulp gulp-if gulp-uglify minimist
    
    var gulp = require('gulp');
    var gulpif = require('gulp-if');
    var uglify = require('gulp-uglify');
    
    var minimist = require('minimist');
    
    var knownOptions = {
      string: 'env',
      default: { env: process.env.NODE_ENV || 'production' }
    };
    
    var options = minimist(process.argv.slice(2), knownOptions);
    
    gulp.task('scripts', function() {
      return gulp.src('**/*.js')
        .pipe(gulpif(options.env === 'production', uglify())) // only minify in production
        .pipe(gulp.dest('dist'));
    });
    

    然后运行gulp:

    $ gulp scripts --env development
    

    Source

  • 2
    var isProduction = (process.argv.indexOf("production")>-1);
    

    CLI gulp production 调用我的 生产环境 任务并为任何条件设置一个标志 .

  • 7

    我们想为不同的环境传递不同的配置文件 - 一个用于 productiondevtesting . 这是gulp文件中的代码:

    //passing in flag to gulp to set environment
    //var env = gutil.env.env;
    
    if (typeof gutil.env.env === 'string') {
      process.env.NODE_ENV = gutil.env.env;
    }
    

    这是app.js文件中的代码:

    if(env === 'testing'){
          var Config = require('./config.testing.js');
          var Api = require('./api/testing.js')(Config.web);
        }
        else if(env === 'dev'){
           Config = require('./config.dev.js');
            Api = require('./api/dev.js').Api;
        }
        else{
           Config = require('./config.production.js');
           Api = require('./api/production.js')(Config.web);
        }
    

    然后运行它gulp --env=testing

  • 1

    自从这个问题发布以来已经有一段时间了,但也许它会帮助某些人 .

    我正在使用GULP CLI 2.0.1(全局安装)和GULP 4.0.0(本地安装),这里是你如何做到这一点,没有任何额外的插件 . 我认为代码是不言自明的 .

    var cp = require('child_process'), 
    { src, dest, series, parallel, watch } = require('gulp');
    
    // == availableTasks: log available tasks to console
    function availableTasks(done) {
      var command = 'gulp --tasks-simple';
      if (process.argv.indexOf('--verbose') > -1) {
        command = 'gulp --tasks';
      }
      cp.exec(command, function(err, stdout, stderr) {
        done(console.log('Available tasks are:\n' + stdout));
      });
    }
    availableTasks.displayName = 'tasks';
    availableTasks.description = 'Log available tasks to console as plain text list.';
    availableTasks.flags = {
      '--verbose': 'Display tasks dependency tree instead of plain text list.'
    };
    exports.availableTasks = availableTasks;
    

    从控制台运行:

    gulp availableTasks
    

    然后运行并查看差异:

    gulp availableTasks --verbose
    

相关问题