我有一个名为“sass”的任务,它会缩小.scss文件,并在它与.css文件相同之后(并将它们组合在一起)
使用gulp-cssnano
尝试:
这样:
var gulp = require('gulp');
var livereload = require('gulp-livereload')
var uglify = require('gulp-uglifyjs');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var fs = require('fs');
var concat = require('gulp-concat');
var cssnano = require('gulp-cssnano');
gulp.task('sass', function () {
gulp.src(['./node_modules/bootstrap/scss/bootstrap.scss', './sass/**/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write('./'))
.pipe(concat('style.css'))
.pipe(gulp.dest('./'));
gulp.src(['style.css', './node_modules/startbootstrap-full-slider/css/full-slider.css'])
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(cssnano())
.pipe(concat('style.css'))
.pipe(gulp.dest('./'));
});
运行任务输出:
gulp sass
[16:11:45]使用gulpfile /var/www/test.dev/wp-content/themes/olympos/gulpfile.js [16:11:45] 开始'sass'... [16:11:45] 23 ms后完成'sass'
events.js:141 扔掉//未处理的'错误'事件 ^ CssSyntaxError:/var/www/test.dev/wp-content/themes/olympos/bootstrap.scss:1:0: 错过的分号> 1 | / *! | ^ 2 | * Bootstrap v4.0.0-alpha.6(https://getbootstrap.com)3 | *版权所有2011-2017 The Bootstrap 著者
当我评论第二部分时(负责将常规.css文件进行微调并将它们组合到压缩styles.css [由sass编译产生]) - 这部分代码:
gulp.src(['style.css', './node_modules/startbootstrap-full-slider/css/full-slider.css'])
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(cssnano())
.pipe(concat('style.css'))
.pipe(gulp.dest('./'));
它顺利编译,第二部分我的错误在哪里?我究竟做错了什么?