css - 在命令中传递 Gulp 参数

标签 css gulp gulp-sass

我只是想知道是否可以在 Gulp 命令中传递参数。

例如我想使用以下命令:

gulp alpha

然后我希望将该命令的 alpha 部分传递给我的样式任务,如下所示:

gulp.task('styles', ([ ALPHA ARGUMENT HERE ]) => {
    return gulp.src('src/styles/theme/[ ALPHA ARGUMENT HERE ]/main.scss')
        .pipe(sassGlob())
        .pipe(sass({
            style: 'expanded',
            quiet: true,
            'default-encoding': 'UTF-8'
        }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('public/css'))
        //.pipe(rename({ suffix: '.min' }))
        .pipe(rename('[ ALPHA ARGUMENT HERE ]-all.min.css'))
        .pipe(minifycss({
          compatibility: 'ie8',
          noAdvanced: true
        }))
        .pipe(gulp.dest('public/css/'));
});

然后当我运行默认的 Gulp 任务时:

// Default Task Init

gulp.task('default', () => {
    gulp.start('production');
});

gulp.task('production', ['clean'], () => {
    gulp.start('styles', 'images', 'fonts', 'scripts');
});

我希望我的样式任务在我的 public/css/ 文件夹中生成一个名为:alpha-all.min.css 的文件。

我目前正在使用 Gulp Yargs直接在命令行中使用任务。

这在 Gulp 中可能吗?

最佳答案

我设法自己解决了这个问题,如果有人想知道如何做到这一点,我使用了以下任务:

var theme = argv.destination;

gulp.task('styles', () => {
    return gulp.src('src/styles/theme/' + theme + '/main.scss')
        .pipe(sassGlob())
        .pipe(sass({
            style: 'expanded',
            quiet: true,
            'default-encoding': 'UTF-8'
        }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('public/css'))
        //.pipe(rename({ suffix: '.min' }))
        .pipe(rename(theme + '-all.min.css'))
        .pipe(minifycss({
          compatibility: 'ie8',
          noAdvanced: true
        }))
        .pipe(gulp.dest('public/css/'));
});

通过使用 Gulp Yargs,我可以使用 gulp --destination=alpha 传递参数。

关于css - 在命令中传递 Gulp 参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41611144/

相关文章:

node.js - 安装gulp-sass时NPM警告: "cross-spawn-async@2.2.4..."

sass - 将所有 sass 文件合并到一个文件中

css - 无法让 GulpFile 以我想要的方式运行,丢失了什么?

css - 不在页面顶部时隐藏工具栏组件

javascript - 动态表并保持 thead 固定

php - 为什么隐藏输入字段的值总是给我相同的结果?

angular - 轻松部署 Angular2 应用程序,我需要学习 SystemJS 和 Gulp 吗?

node.js - 在 cli 中运行 gulp 时未找到 Laravel Elixir

javascript - CSS干净的动画重复

angularjs - Glup V4.0.0 'gulp start' 不是函数