Using Gulp to Compile Sass and minify vendor css(使用 Gulp 编译 Sass 并缩小供应商 css)
问题描述
掌握 Gulp 并提出问题.
Getting to grips with Gulp and have a question.
所以我有一个类似下面的 gulp CSS 任务,它工作得很好:
So I have a gulp CSS task like the below which works just fine:
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));;
});
但是有没有办法像 Bootstrap 这样添加我的供应商文件,以便将其包含在内以进行缩小和连接.
But is there a way to add my vendor files like Bootstrap so it will be included for minification and concatenation.
希望你能给点建议!
推荐答案
gulp-sass 将满足您的要求.请让我向您展示如何编译 Sass 文件并缩小(或压缩)已编译的 css 文件:
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
- 在您项目的 gulpfile.js 中,添加以下代码:
注意:outputStyle 在 gulp-sass 中有四个选项:nested
、expanded
、compact
、compressed
Note: outputStyle in gulp-sass has four options: 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');
});
提醒一下自述文件
这篇关于使用 Gulp 编译 Sass 并缩小供应商 css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使用 Gulp 编译 Sass 并缩小供应商 css
基础教程推荐
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01