编译* .css文件和* .scss文件
我们有CSS和SCSS文件的组合。这是因为我们在SCSS中编写了自己的样式,一些样式库也提供了SCSS文件,但我们也只有CSS文件,其中没有SCSS文件由库供应商提供(例如,它们只提供CSS文件或LESS文件)编译* .css文件和* .scss文件
下面是我们为gulpfile.js SCSS文件的任务:
gulp.src([
'bower_components/simple/simple.css',
//... more CSS files
'src/scss/app.scss'
],
{base: '.'})
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'));
无论如何,这似乎给了我们奇怪的行为,如创建在dist /目录下的“bower_components”目录。我们如何编译CSS文件和SCSS文件?
我遇到了同样的问题,基本上gulp不喜欢你在src中不同的文件夹路径,你将不得不使用2个不同的任务来处理你想要的东西。
唯一的简单的方法,我发现解决这个问题是使用这个工具:npm-gulp-rename
有了这样的一行:
var rename = require("gulp-rename");
.pipe(rename(function (path) { return path.dirname = "./"; }))
这将完成被删除流中的额外的文件夹信息在它有数据后,当它输出文件时,额外的文件夹信息将被删除。
我在您的示例代码:
gulp.src([
'bower_components/simple/simple.css',
//... more CSS files
'src/scss/app.scss'
],
{base: '.'})
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(rename(function (path) { return path.dirname = "./"; }))
.pipe(gulp.dest('dist/css'));
UPDATE(基于您的评论):
个人而言,我会去了解这个以不同的方式:
- 将文件复制你需要使用bower_components。
- 将文件放在名为vendor的新文件夹中(忽略GIT中的文件夹)。
- 然后我正常建立SCSS。
关闭我的头顶,它的工作是这样的:
gulp.task("copy", function() {
return gulp.src([
'bower_components/simple1/simple1.css'
'bower_components/simple2/simple2.css'
], {base: '.'})
.pipe(rename(function (path) { return path.dirname = './'; }))
.pipe(gulp.dest('vendor')
)};
gulp.task("scss", ["copy"], function() {
return gulp.src([ 'src/scss/app.scss' ], {base: '.'})
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css')
)};
我们,你可以没有我的个人建议做的重要组成部分。
您需要使用@import直接支持CSS files添加到您的app.scss其他CSS文件:
@import "../../vendor/simple1.css";
您也可以直接从bower_components使用@import夹从而跳过我的副本任务:
@import "../../bower_components/simple1/simple1.css";
第二个任务将是你运行的一个将创建你的所有CSS文件连接在一起的任务。
如果您不想在您的app.scss中使用@import,那么您可以在gulp-concat中添加另一个常见的gulp广告。如果您希望我扩展如何使用这个,请发表评论。
有几件事情要考虑:
- 级联可能使你的源地图不正确。
- 将文件从bower_components文件夹复制到供应商文件夹将使您的Web服务器上的文件可用,以便您的源映射更有意义。
这里有几件事情,你可以尝试
1.使用一饮而尽直通
此功能可能是最简单的,但需要注意的是,它需要一饮而尽版本4
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var bower_files = require('main-bower-files');
var sourcemaps = require('gulp-sourcemaps');
var filter = require('gulp-filter');
var merge = require('merge2');
gulp.task('styles', function() {
var glob = bower_files('**/*.scss') // select the sass bower files
glob.push('app/**/*.scss') // select your projects sass files
return gulp.src(glob)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.src(bower_files('**/*.css'), {passthrough: true})) // add bower css files to stream
.pipe(concat('main.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
这里的工作流程是,您将选择所有来自bower组件目录以及项目目录的初始sass文件。然后将它们传递给sass编译器。之后,我们可以使用另一个gulp.src
方法,并通过将传递选项,选择所有的凉亭下载的CSS文件,我们将这些文件添加到我们已经sass编译的文件,并执行其他必要的操作。
2.使用合并流
此选项不要求大口版本4可能是一个更好的选择,因为它可以让你对不同的流执行多个操作。
gulp.task('styles', function() {
var scss_stream = bower_files('**/*.scss')
scss_stream.push('app/**/*.scss')
scss_stream = gulp.src(scss_stream)
.pipe(sass().on('error', sass.logError));
var css_stream = gulp.src(bower_files('**/*.css'))
return merge(scss_stream, css_stream)
.pipe(concat('main-one.css'))
.pipe(gulp.dest('dist'));
})
通过分别选择不同类型的文件并将它们作为自己的流,我们可以对不同的流执行多个操作。在的第一个流中,我们选择了项目和bowers scss
文件并将它们传递给了gulp sass插件。在第二个流我们选择了所有的css
文件。然后,我们合并两个流一起,执行的不是两个(concatenation
和writing to destination
)独特的操作
我强烈建议您使用main-bower-files插件从bower_components
而且选择的文件要小心,如果文件的顺序被选中很重要。您可能不得不求助于以正确的顺序选择文件。您可以使用stream queue插件以及gulp-filter插件。
我希望这可以帮助
gulp-flatten也将工作。 – Mark
感谢您的回复。 Gulp重命名运行,但似乎也复制库文件(在我的例子中simple.css)。所以我最终在我的dist/css目录中添加了app.css和simple.css。我希望所有的CSS都被编译到单个app.css文件中。 – Martyn
根据您的评论更新了答案,并提供了更多信息和说明。 – fjoe