Gulpfile.js - 如何在 gulp.watch 上获取 .min.css、.css 和 .css.map 文件？

Question

好的，我对此进行了大量研究，但在一个 drupal 站点上，我有一个 zurb 基础主题，对此我非常满意。我遇到的唯一问题是在自定义 scss 组件时。我正在使用 gulp 对其进行编译，它正在重新创建 css 文件。但是，我想让它也给我 min.css 文件和 css.map 文件，但我似乎无法弄清楚。我在 gulpfile.js 上尝试了许多不同的迭代，但这是我最新的。

它只生成 css 文件。

  var sassFiles = './themes/zurb_foundation/scss/**/*.scss',
    cssDest = './themes/zurb_foundation/css';

  gulp.task('styles', function(){
    gulp.src(sassFiles)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer())
    .pipe(gulp.dest(cssDest))   
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(gulp.dest(cssDest))    
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(rename({ extname: 'min.css' }))
    .pipe(sourcemaps.write('./themes/zurb_foundation/css'))
    .pipe(gulp.dest(cssDest))
 });

  gulp.task('watch', function() {
    livereload.listen();
    gulp.watch(sassFiles, ['styles']);
 })

我终于让它产生了以下错误：

CssSyntaxError: /Users/USERNAME/Desktop/SITEFOLDER/ROOTDIR/themes/zurb_foundation/scss/foundation.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the 
postcss-scss parser> 1 | // Foundation by ZURB

我想此时，我的问题是我应该如何设置我的 gulp 文件来处理 postcss-scss 解析？

Answer 1

所以首先我们将必要的包声明为 const 因为这些值不应该改变它们的分配。

const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const cssmin = require('gulp-cssmin');

然后我们写了一个gulp任务叫做sass，在这个任务中我们以.scss格式搜索styles文件夹中的所有文件。

我们检查并记录任何错误，我们创建源映射，允许浏览器将 SASS 生成的 CSS 映射回原始源文件（如果您想使用 .scss/.css 这样）。

然后我们将您的新 .css 文件写入 public/styles 文件夹。

gulp.task('sass', function () {
    return gulp.src('./styles/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./public/styles'));
});

之后，我们编写第二个 gulp 任务，名为 minify-css。

我们在样式文件夹中寻找 .css 格式的所有文件。

首先，我们自动为所有 css 属性添加前缀。例如，如果您有一个 css class，您已设置：

user-select: none;

Autoprefixing 将处理添加：

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

之后我们缩小、连接然后将新缩小的 css 文件命名为 main.min.css，然后将其保存在 public/styles 文件夹中。

gulp.task('minify-css', function(){
    gulp.src(['./styles/*.css'])
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(cssmin())
        .pipe(concat('main.css'))
        .pipe(rename("main.min.css"))
        .pipe(gulp.dest('./public/styles'));
});

然后我们写一个名为build的任务，所以要按时间顺序调用sass和minify-css任务只需运行gulp build终端。

gulp.task('build', [‘sass’, ‘minify-css’]);

Gulpfile.js - 如何在 gulp.watch 上获取 .min.css、.css 和 .css.map 文件？

Gulpfile.js - how to get .min.css, .css, and .css.map files on gulp.watch?

sass

minify

gulp