如何编译 SASS 并缩小 CSS 并在同一任务中使用 gulp 4 创建其地图

Question

如何编译 SASS 并缩小 CSS 并在同一任务中使用 gulp 4 创建其地图

我正在使用 Gulp 4，我想知道是否有办法将 css 与它的地图一起放置，并用它的地图将 css 缩小，但在同一个任务中，我的意思是这样的：

- css
    - main.css
    - main.css.map
    - main.min.css
    - main.min.css.map

我当前的代码确实做到了，但我有两个任务

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');

//declare the scr folder
let root = '../src' + '/';
let scssFolder = root + 'scss/';

//declare the build folder
let build = '../build/' + '/';
let cssFolder = build + 'css';

// Compile scss into css
function css() {
  return gulp
    .src(scssFolder + 'main.scss')
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(
      sass({
        outputStyle: 'expanded',
      }).on('error', sass.logError)
    )
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(cssFolder));
}

//minify css
function minCSS() {
  return gulp
    .src(scssFolder + 'main.scss')
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(
      sass({
        outputStyle: 'compressed',
      }).on('error', sass.logError)
    )
    .pipe(autoprefixer('last 2 versions'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(cssFolder));
}

exports.css = css;
exports.minCSS = minCSS;

我想知道我是否可以放入一项任务，或者我如何在一项任务中调用它们，例如：

function css() {
  return gulp
    .src(scssFolder + 'main.scss')
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(
      sass({
        outputStyle: 'expanded',
      }).on('error', sass.logError)
    )
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(cssFolder))

//Put here the minify code
.pipe(cleanCSS())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(cssFolder));

}

但前面的代码不起作用，因为它创建了main.css 和main.css.map

Answer 1

创建新函数，您可以在其中从您的第一个代码连续运行这两个函数。

例子

function compileAndMinify(){
   return gulp.series(css(),minCss()); 
}

Answer 2

好的，所以如果您使用 gulp 4，我认为这可能是解决此问题的最终解决方案。此外，我正在使用 babel 通过“gulpfile.babel.js”在 es6 中编写我的 gulp 文件，如果这样，请原谅示例看起来很奇怪（我将 gulp 4 构建为多个 js 模块）。

这是一个非特定问题的答案，但它说明了我如何在同一任务中输出 min 和 non min css 和源映射，方法是让我的 gulp 任务通过 gulp 4 并行运行两次。

'use strict';
import config from './config';
import yargs from 'yargs';
import { src, dest, parallel, series } from 'gulp';
import concat from 'gulp-concat';
import rename from 'gulp-rename';
import csso from 'gulp-csso';
import sass from 'gulp-sass';
import tildeImporter from 'node-sass-tilde-importer';
import sassVar from 'gulp-sass-variables';
import sourcemaps from 'gulp-sourcemaps';

sass.compiler = require('node-sass');
var args = yargs.argv;

class isolatedVendorBuild {
    static build(done, destination, fileName) {
        //this is the actual gulp-sass build function, that will be wrapped by two other gulp4 tasks
        let internalBuild = ((shouldMin) => {
            //store the stream to a variable before returning it, so we can conditionally add things to it
            let ret = src(config.paths.srcSharedIsolatedVendorScss)
                .pipe(sourcemaps.init())
                .pipe(concat(fileName))
                .pipe(sassVar({
                    $env: args.prod ? 'prod' : 'dev'
                }))
                .pipe(sass({
                    importer: tildeImporter,
                    outputStyle: 'nested'
                }).on('error', sass.logError));

            if (shouldMin) {
                //if the function was called with shouldMin true, then reset the stream from the previous stream but with the rename .min and csso call added to it
                ret = ret.pipe(rename({ suffix: '.min' }));
                ret.pipe(csso({ sourceMap: true }));
            }
            //reset the stream to the previous ret and add sourcemaps.write and destination output to it
            ret = ret.pipe(sourcemaps.write('.'))
                .pipe(dest(destination));

            //return the complete stream
            return ret;

        });


        //create two wrapper functions for the internal build to be called in gulp since gulp can't pass arguments to functions treated as gulp tasks
        function buildStylesUnMinified() {
            return internalBuild(false); //pass false for shouldMin and it will output the unminified css and source map
        }

        function buildStylesMinified() {
            return internalBuild(true); //pass true for shouldMin and it will output the minified css and source map with the .min suffix added to the file name.
        }

        //the magic, we use gulp parallel to run the unminified version and minified version of this sass build at the same time calculating two separate streams of css output at the same time. 
        return parallel(buildStylesUnMinified, buildStylesMinified)(done);
    }
}

export default isolatedVendorBuild;

我见过其他解决方案，首先输出非缩小的 css，然后将其用作缩小任务的输入。这行得通，但它会强制同步依赖，并且在复杂的构建中，构建时间会以蜗牛的速度爬行。

我最近想出了这个方法，在一个具有多个 scss 输出文件的新项目中解决了这个问题。我喜欢它，因为缩小和未缩小的任务同时运行，并且我能够让我的主构建让整个 scss 输出过程是异步的，就像在执行脚本和其他东西之前不依赖它完成一样。