gulp：我如何在scss文件之间传输一个css文件？ gulp.src（['sassfile1.scss'，'cssfile.css'，'sassfile2.scss']） [英] gulp: How do i pipe a css file in between scss files? gulp.src(['sassfile1.scss', 'cssfile.css' ,'sassfile2.scss'])
问题描述
$ b
// 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 /自举/ SCSS / bootstrap.s （'outputStyle：'compressed'}）。（）（） '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（'最后2版'，'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毫秒后完成'sass'
events.js：141
throw er; //未处理'错误'事件
^ 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 | * Copyright 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文件中sourcemap的输出发生了吗？）
最初，我认为最好的方法是将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（'./'））;
}）;
这可能并不完美，当我写这篇文章的时候，我也意识到你想要全速滑行.css文件在bootstrap之后但在项目文件之前包含。此外，这不会为第二个子任务使用源地图。正如你可能知道的那样，我一段时间以来都没有写过大量的任务！但是如果你有时间的话，也许有什么可玩的。
PS cssnano（）指的是 gulp-cssnano 。
this is my current code part in 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('./'));
});
I am trying to add "full-slider.css` file in between, to minify and combine (in that order).
the content of full-slider.css is not added to the final style.css
edit:
Tried using gulp-cssnano:
this way:
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] Using gulpfile /var/www/test.dev/wp-content/themes/olympos/gulpfile.js [16:11:45] Starting 'sass'... [16:11:45] Finished 'sass' after 23 ms
events.js:141 throw er; // Unhandled 'error' event ^ CssSyntaxError: /var/www/test.dev/wp-content/themes/olympos/bootstrap.scss:1:0: Missed semicolon> 1 | /*! | ^ 2 | * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) 3 | * Copyright 2011-2017 The Bootstrap Authors
when i comment the part:
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('./'));
it compiles smoothly, where is my mistake?
(theory: might this happen because of the output for the sourcemap in the generated new css file? )
Initially I thought that the best way would be to copy the CSS file to a new location in your project files (using gulp.dest()), set the file name to have an .scss extension and then run the gulp.sass() pipe again.
However, this isn't really using gulp-sass as it's supposed to be used (it's not a file concatenator). A better way would be to do something like this (bear in mind I haven't got time to practically test this so it may not work. Apologies.):
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('./'));
});
That probably isn't perfect, and I also realised as I was writing this that you wanted the fullslider.css file to be included after bootstrap but before your project files. Further this doesn't use sourcemaps for the second sub-task. As you can probably tell, I haven't written gulp tasks for a while! But if you have time, maybe something to play around with.
P.S cssnano() refers to gulp-cssnano.
这篇关于gulp：我如何在scss文件之间传输一个css文件？ gulp.src（['sassfile1.scss'，'cssfile.css'，'sassfile2.scss']）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
