如何使用 Gulp 从 SASS/SCSS 中缩小和 Autoprefixer CSS 文件

Posted 2023-02-16

【中文标题】如何使用 Gulp 从 SASS/SCSS 中缩小和 Autoprefixer CSS 文件

【英文标题】：How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

【发布时间】：2016-03-05 16:05:38

【问题描述】：

我的 gulpfile 有问题，不知道出了什么问题。

问题：autoprefixer 无法按预期工作，并且它并不总是按预期正确输出 .css 和 .min.css 文件。

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

var config = 
    sassMain: 'style/Main.scss',
    sassFiles: 'style/**/*.scss',
    cssfiles: ['style/Main.css'],
    dest: 'style',
    autoprefixerOptions: 
    browsers: ['last 2 versions', '> 5%']
    
;

gulp.task('compile-sass', function () 
    return gulp.src(config.sassMain)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(prefix(config.autoprefixerOptions.browsers))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
        .pipe(rename( extname: '.min.css' ))
        .pipe(minify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
);

gulp.task('default', function () 
    gulp.watch(config.sassFiles, ['compile-sass']);
);

有什么想法吗？

【参考方案1】：

首先，我建议将所有源文件放入文件夹src，并将构建文件放入build。这在下面有效，您可以逐步添加新管道以查看是什么破坏了它

gulpfile.js

var gulp = require('gulp')
var sass = require('gulp-sass')
var autoprefixer = require('gulp-autoprefixer')
var minCss = require('gulp-minify-css')
var rename = require('gulp-rename')

var config = 
   srcCss : 'src/scss/**/*.scss',
   buildCss: 'build/css'


gulp.task('build-css', function(cb) 
   gulp.src(config.srcCss)

      // output non-minified CSS file
      .pipe(sass(
         outputStyle : 'expanded'
      ).on('error', sass.logError))
      .pipe(autoprefixer())
      .pipe(gulp.dest(config.buildCss))

      // output the minified version
      .pipe(minCss())
      .pipe(rename( extname: '.min.css' ))
      .pipe(gulp.dest(config.buildCss))

   cb()
)

gulp.task('watch', function(cb) 
   gulp.watch(config.srcCss, ['build-css']) 
)

gulp.task('default', ['build-css', 'watch'])

main.scss

$degrees: '50%';

.rotated 
    transform: $degrees;

package.json

  "name": "",
  "version": "1.0.0",
  "private": true,
  "devDependencies": 
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-minify-css": "^1.2.2",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.0"
  

生成的文件结构

这是您运行 $ gulp 后的内容（不包括 node_modules 文件夹）

$ tree -I node_modules
.
├── build
│   └── css
│       ├── main.css
│       └── main.min.css
├── gulpfile.js
├── package.json
└── src
    └── scss
        └── main.scss

4 directories, 5 files

我的环境

$ node -v
v5.1.0

$ npm -v
3.3.12

$ gulp -v
[13:39:54] CLI version 1.0.0
[13:39:54] Local version 3.9.0

【讨论】：

我尝试将其简化为：.pipe(sass()) .pipe(gulp.dest(config.destDir)) 但它仍然无法正常工作。我的 npm/node 包可能有问题吗？我原来的 Gulpfile.js 上周还在工作。节点5.1.0 和 npm 3.3.12

尝试完全按照我编写和测试的方式使用我的代码。然后根据需要逐步添加更多代码。

我试过了。得到同样的东西。看起来我的 node 和 npm 包确实发生了一些奇怪的事情

rm -rf node_modules && npm install

这是在 Google 上的一个不错的发现。一条评论 - gulp-minify-css 已被弃用，并且在发表此评论时至少引入了一个安全漏洞 (npmjs.com/advisories/785)。现在建议使用gulp-clean-css。