使用 npm 一次性构建 & 缩小 & 前缀 CSS答案

【问题标题】：Build & Minify & Prefix CSS in one go with npm使用 npm 一次性构建 & 缩小 & 前缀 CSS
【发布时间】：2018-09-15 00:31:28
【问题描述】：

我有一个 build 脚本用于构建这样的 CSS：

"prebuild:css": "node-sass --source-map true sass/styles.scss /styles.prebuild.css",
"prefix:css": "postcss --use autoprefixer -b 'last 2 versions' < /aareguru.styles.css | postcss --use cssnano > /styles.min.css",
"build": "npm run prebuild:css && npm run prefix:css"

首先创建一个预构建的 vanilla css 文件。
然后应用自动前缀
最后应用了缩小

可以一次性完成吗？

因为如果预构建以某种方式失败，则脚本将不再同步并且会失败。

【问题讨论】：

您可以切换到Gulp 之类的东西，以使此过程更易于管理和发现错误等...问题是，如果一个失败，您为什么还希望另一个运行？
而Gulp 是否允许一次性完成此操作？
是的，你可以链接 gulp，所以它看起来像 gulp.src( [fileArray] ).pipe( sass() ).pipe( autoprefix() ).pipe( minify() ).pipe( uglify() ) 或其他东西。但是如果一个失败了，这个过程的其余部分显然也会失败，因为每个下一个任务都依赖于最后一个。所以重申我的问题：如果一个失败，你为什么还要让其余的运行？无论如何，您的输出都是不正确的，如果没有错误或消息，您甚至不会真正知道您的输出无法正常工作，从而使您更容易出错。

标签： npm sass postcss npm-scripts

【解决方案1】：

对于任何寻求快速、可立即使用的代码的人：

运行这些命令：

npm install -D gulp-sass
npm install -D gulp-autoprefixer
npm install -D gulp-uglifycss

然后使用以下代码创建一个 gulpfile.js：

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglifycss = require('gulp-uglifycss');

var paths = {
    source : './assets/*.sass',
    destination: './css'
};

gulp.task('sass', () => {
    return gulp.src(paths.source)
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(uglifycss({
        "maxLineLen": 80,
        "uglyComments": true
    }))
    .pipe(gulp.dest(paths.destination));
});

运行

gulp sass

【讨论】：