如何在同一任务中编译 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 通过“在 es6 中编写我的 gulp 文件gulpfile.babel.js" 如果这个例子看起来很奇怪，请原谅（我将我的 gulp 4 构建成多个 js 模块）。

这是一个非特定问题的答案，但它说明了我如何通过 gulp 任务运行在同一任务中输出最小值和非最小值 css 以及源映射通过 gulp 4 parallel.

两次

'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 输出过程异步，就像不依赖于它完成一样在做脚本和东西之前。

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

How to compile SASS and minify CSS and create its map with gulp 4 in same task

javascript

gulp

gulp-sass

gulp-sourcemaps