为什么我的gulpfile.js不只编译自定义SCSS?

时间:2019-08-16 16:48:43

标签: zurb-foundation gulp-sass

我在Foundation CLI上遇到了一些问题。我的自定义SCSS代码无法通过Gulpfile.js进行编译。有趣的是,当我在任何HTML文件或Foundation自己的SCSS文件中进行更改时,文件都会快速编译。但是,当我编写自己的SCSS代码时,它不会编译。我的gulpfile.js可能有问题

我使用Foundation CLI版本2.2.5,节点为v10.16.1。

var gulp          = require('gulp');
var browserSync   = require('browser-sync').create();
var $             = require('gulp-load-plugins')();
var autoprefixer  = require('autoprefixer');

var sassPaths = [
  'node_modules/foundation-sites/scss',
  'node_modules/motion-ui/src'
];

function sass() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'compressed' // if css compressed **file size**
    })
      .on('error', $.sass.logError))
    .pipe($.postcss([
      autoprefixer({ Browserlists: ['last 2 versions', 'ie >= 9'] })
    ]))
    .pipe(gulp.dest('css'))
    .pipe(browserSync.stream());
};

function serve() {
  browserSync.init({
    server: "./"
  });

  gulp.watch("scss/*.scss", sass);
  gulp.watch("*.html").on('change', browserSync.reload);
}

gulp.task('sass', sass);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));

0 个答案:

没有答案