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

时间:2017-10-23 02:50:53

标签: sass gulp minify

好的,我已经对此进行了大量的研究,但是在一个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

我想在这一点上,我的问题是我应该如何设置我的gulpfile来解决postcss-scss解析?

1 个答案:

答案 0 :(得分:4)

首先,我们将必要的包声明为const,因为这些值不应更改其分配。

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

然后我们编写一个名为sass的gulp任务,在其中我们以.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

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

首先,我们自动为所有css属性添加前缀。例如,如果您有一个已设置的css类:

user-select: none;

自动修复将处理添加:

-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-cssgulp build任务。

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