Question

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

我正在使用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;

和id喜欢知道我是否可以执行一项任务，或者如何在一项任务中调用它们：

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模块）。

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

'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创建其地图

2 个答案: