使用 Gulp 編譯 Sass 並縮小供應商 css

Question

掌握 Gulp 並提出問題。

所以我有一個 gulp CSS 任務，就像下面這樣工作得很好：

var sassDir = 'app/scss';
var targetCssDir = 'public/assets';

gulp.task('css', function(){
    return gulp.src(sassDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 10 version'))
        .pipe(gulp.dest(targetCssDir));;
});

但是有沒有辦法添加我的供應商文件，如 Bootstrap，以便將其包含在內以進行縮小和連接。

希望大家多多指教！

Answer 1

gulp-sass將滿足您的要求。 請允許我告訴您如何編譯Sass文件並縮小（或壓縮）已編譯的css文件：

• 從這里安裝gulp-sass
• 在你的項目的gulpfile.js中，添加以下代碼：

注意： gulp -sass中的outputStyle有四個選項： nested ， expanded ， compact ， compressed

它確實有效，我在我的項目中使用過它。 希望能幫助到你。

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

//sass
gulp.task('sass', function () {
    gulp.src(['yourCSSFolder/*.scss', 'yourCSSFolder/**/*.scss'])
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest('yourCSSFolder/'));
});

// Default task
gulp.task('default', function () {
    gulp.start('sass');
});

提醒自述

Answer 2

我能想到兩個解決方案。 我認為最好的選擇是在Sass文件中使用@import語句來包含供應商文件。 使用相對路徑到他們居住的地方，然后您可以按照您想要的順序包含它們。 顯然，除非您使用SASS導入，否則使用SASS不起作用。

---

或者，您可以使用event-stream和gulp-concat來連接文件流。 在這種情況下，你不應該使用gulp-sass對文件進行壓縮，而是使用類似gulp-csso來處理壓縮。

var es = require('event-stream'),
    concat = require('gulp-concat');

gulp.task('css', function(){
    var vendorFiles = gulp.src('/glob/for/vendor/files');
    var appFiles = gulp.src(sassDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log));

    return es.concat(vendorFiles, appFiles)
        .pipe(concat('output-file-name.css'))
        .pipe(autoprefix('last 10 version'))
        .pipe(gulp.dest(targetCssDir));
});

同樣，如果可以，您應該使用第一種方法，但es.concat對其他方案很有用。

Answer 3

我發現這最近gulp-cssjoin這允許你用內聯css替換導入

scss

@import '../../bower_components/angular/angular-csp.css';

吞咽任務

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-ruby-sass'),
    cssjoin = require('gulp-cssjoin'),
    csscomb = require('gulp-csscomb');

gulp.task('sass',['images'], function() {
  return gulp.src('src/sass/*.{sass,scss}')
    .pipe(sass({
      compass: true,
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../src/sass'
    }))
    .on('error',gutil.log.bind(gutil, 'Sass Error'))
    .pipe(cssjoin({
      paths: ['./src/sass']
    }))
    .pipe(csscomb())
    .pipe(gulp.dest('build'));
});

重要的是路徑的傳入

.pipe(cssjoin({
  paths: ['./src/sass']
}))

Answer 4

只需一項簡單的任務，您就可以將 scss 文件轉換為 min.css

const { series, src, dest } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const cleanCss = require("gulp-clean-css");
var rename = require("gulp-rename");

function minCss() {
  return src("scss/*.scss")
    .pipe(sass())
    .pipe(
      rename(function (file) {
        file.basename = file.basename + ".min";
      })
    )
    .pipe(cleanCss())
    .pipe(dest("css"));
}

exports.watch = series(minCss);