[英]Using Gulp to Compile Sass and minify vendor css
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.!希望大家多多指教!
gulp-sass will meet your request. gulp-sass将满足您的要求。 Pls let me show you how to compile Sass files and minify (or compress) compiled css files:
请允许我告诉您如何编译Sass文件并缩小(或压缩)已编译的css文件:
Note: outputStyle in 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');
});
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. @import
statements within your Sass file to include the vendor files. 我认为最好的选择是在Sass文件中使用
@import
语句来包含供应商文件。 Use relative paths to where they live, and you can then include them in the order you want. 使用相对路径到他们居住的地方,然后您可以按照您想要的顺序包含它们。
显然,除非您使用SASS导入,否则使用SASS不起作用。
Alternatively, you can use event-stream
and gulp-concat
to concatenate streams of files. 或者,您可以使用
event-stream
和gulp-concat
来连接文件流。 In this case, you should not use gulp-sass
to compress the files, rather, use something like gulp-csso
to handle the compression. 在这种情况下,你不应该使用
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.concat
is useful for other scenarios. 同样,如果可以,您应该使用第一种方法,但
es.concat
对其他方案很有用。
i found this recently gulp-cssjoin this 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']
}))
You can convert scss files to min.css with just one simple task只需一项简单的任务,您就可以将 scss 文件转换为 min.css
const { series, src, dest } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const cleanCss = require("gulp-clean-css");
var rename = require("gulp-rename");
function minCss() {
return src("scss/*.scss")
.pipe(sass())
.pipe(
rename(function (file) {
file.basename = file.basename + ".min";
})
)
.pipe(cleanCss())
.pipe(dest("css"));
}
exports.watch = series(minCss);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.