使用 Gulp 编译 Sass 并缩小供应商 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22069515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Gulp to Compile Sass and minify vendor css
提问by Lee
Getting to grips with Gulp and have a question.
掌握 Gulp 并提出问题。
So I have a gulp CSS task like the below which works just fine:
所以我有一个像下面这样的 gulp CSS 任务，它工作得很好：
var sassDir = 'app/scss';
var targetCssDir = 'public/assets';
gulp.task('css', function(){
return gulp.src(sassDir + '/main.scss')
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(autoprefix('last 10 version'))
.pipe(gulp.dest(targetCssDir));;
});
But is there a way to add my vendor files like Bootstrap so it will be included for minification and concatenation.
但是有没有办法添加我的供应商文件，例如 Bootstrap，以便将其包含在内以进行缩小和连接。
Hope you can advise.!
希望大家多多指教。！
回答by aisin
gulp-sass will meet your request. Pls let me show you how to compile Sass files and minify (or compress) compiled css files:
gulp-sass 将满足您的要求。请让我向您展示如何编译 Sass 文件和缩小（或压缩）已编译的 css 文件：
- install gulp-sass from here
- in you project's gulpfile.js, add following code:
- 从这里安装 gulp-sass
- 在您项目的 gulpfile.js 中，添加以下代码：
Note: outputStylein gulp-sass has four options: nested, expanded, compact, compressed
注意：gulp-sass 中的outputStyle有四个选项：nested, expanded, compact,compressed
It really works, I have used it in my project. Hope it helps.
它确实有效，我已经在我的项目中使用了它。希望能帮助到你。
var gulp = require('gulp');
var sass = require('gulp-sass');
//sass
gulp.task('sass', function () {
gulp.src(['yourCSSFolder/*.scss', 'yourCSSFolder/**/*.scss'])
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('yourCSSFolder/'));
});
// Default task
gulp.task('default', function () {
gulp.start('sass');
});
For reminder the readme
为了提醒自述文件
回答by OverZealous
I can think of two solutions. The best option, I feel, is to use Apparently this doesn't work using SASS unless you are using SASS imports.@importstatements within your Sass file to include the vendor files. Use relative paths to where they live, and you can then include them in the order you want.
我可以想到两种解决方案。 我觉得最好的选择是显然，除非您使用 SASS 导入，否则这在使用 SASS 时不起作用。@import在 Sass 文件中使用语句来包含供应商文件。使用它们所在位置的相对路径，然后您可以按所需顺序包含它们。
Alternatively, you can use event-streamand gulp-concatto concatenate streams of files. In this case, you should notuse gulp-sassto compress the files, rather, use something like gulp-cssoto handle the compression.
或者，您可以使用event-stream和gulp-concat来连接文件流。在这种情况下，你应该不使用gulp-sass对文件进行压缩，而是使用类似gulp-csso处理压缩。
var es = require('event-stream'),
concat = require('gulp-concat');
gulp.task('css', function(){
var vendorFiles = gulp.src('/glob/for/vendor/files');
var appFiles = gulp.src(sassDir + '/main.scss')
.pipe(sass({ style: 'compressed' }).on('error', gutil.log));
return es.concat(vendorFiles, appFiles)
.pipe(concat('output-file-name.css'))
.pipe(autoprefix('last 10 version'))
.pipe(gulp.dest(targetCssDir));
});
Again, you should use the first method if you can, but es.concatis useful for other scenarios.
同样，如果可以，您应该使用第一种方法，但es.concat对于其他场景很有用。
回答by Tristan Smith
i found this recently gulp-cssjointhis allows you to replace imports with inline css
我最近发现这个gulp-cssjoin这允许你用内联 css 替换导入
the scss
scss
@import '../../bower_components/angular/angular-csp.css';
the gulp task
吞咽任务
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-ruby-sass'),
cssjoin = require('gulp-cssjoin'),
csscomb = require('gulp-csscomb');
gulp.task('sass',['images'], function() {
return gulp.src('src/sass/*.{sass,scss}')
.pipe(sass({
compass: true,
bundleExec: true,
sourcemap: true,
sourcemapPath: '../src/sass'
}))
.on('error',gutil.log.bind(gutil, 'Sass Error'))
.pipe(cssjoin({
paths: ['./src/sass']
}))
.pipe(csscomb())
.pipe(gulp.dest('build'));
});
the important part is the passing in of the paths
重要的部分是路径的传入
.pipe(cssjoin({
paths: ['./src/sass']
}))
