gulp:我如何在scss文件之间管道css文件? gulp.src(['sassfile1.scss','cssfile.css','sassfile2.scss'])

时间:2017-10-10 08:59:48

标签: css sass gulp gulp-sass

这是我在gulpfile.js中的当前代码部分:

// Sass 
gulp.task('sass', function () {
  gulp.src(['./node_modules/bootstrap/scss/bootstrap.scss', './node_modules/startbootstrap-full-slider/css/full-slider.css' ,'./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('./'));
});

我正在尝试在其间添加“full-slider.css”文件,以缩小和合并(按此顺序)。

full-slider.css的内容未添加到最终style.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   著者

当我评论这部分时:

    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('./'));

它顺利编译,我的错误在哪里?

(理论:这可能是因为生成的新css文件中的源图的输出?)

1 个答案:

答案 0 :(得分:1)

最初我认为最好的方法是将CSS文件复制到项目文件中的新位置(使用gulp.dest()),将文件名设置为.scss扩展名,然后运行再次gulp.sass()管道。

然而,这并不是真正使用gulp-sass,因为它应该被使用(它不是文件连接器)。更好的方法是做这样的事情(记住我没有时间去实际测试这个,所以它可能不起作用。道歉。):

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(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('./'));
});

这可能并不完美,我也意识到我写这篇文章时你希望在bootstrap之后但在你的项目文件之前包含fullslider.css文件。此外,这不会将源图用于第二个子任务。正如你可能会说的那样,我还没有写一段时间的gulp任务!但如果你有时间,也许可以玩一些东西。

P.S cssnano()是指gulp-cssnano