使用 Gulp 编译 Sass 并缩小供应商 css

Using Gulp to Compile Sass and minify vendor css(使用 Gulp 编译 Sass 并缩小供应商 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 中有四个选项:nestedexpandedcompactcompressed

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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

How to test @media print with protractor or selenium?(如何用量角器或硒测试@media print?)
Finding shadow DOM text with Selenium and CSS(使用 Selenium 和 CSS 查找阴影 DOM 文本)
Formatting a number as currency using CSS(使用 CSS 将数字格式化为货币)
Failed to create shader cache entry- error while locating an element by its Css selector(通过 Css 选择器定位元素时无法创建着色器缓存条目 - 错误)
A issue with the jquery dialog when using the themeroller css(使用 themeroller css 时 jquery 对话框的问题)
Z-index in jQuery dialog. Autosuggest list not displayed properly(jQuery 对话框中的 Z-index.自动建议列表未正确显示)