Использование Gulp для компиляции Sass и минимизации поставщика css

Знакомство с Gulp и вопрос.

Итак, у меня есть задача CSS Gulp, как показано ниже:

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, поэтому он будет включен для минимизации и конкатенации.

Надеюсь, вы можете посоветовать.!

Ответ 1

gulp -sass выполнит ваш запрос. Pls позволяет мне показать вам, как скомпилировать файлы Sass и минимизировать (или сжать) скомпилированные файлы css:

установите gulp -sass из здесь
в проекте gulpfile.js, добавьте следующий код:

Примечание: outputStyle в gulp -sass имеет четыре опции: nested, expanded, compact, compressed

Это действительно работает, я использовал его в своем проекте. Надеюсь, что это поможет.

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');
});

Для напоминания readme

Ответ 2

Я могу думать о двух решениях. Лучшим вариантом, я считаю, является использование операторов @import в файле Sass для включения файлов поставщика. Используйте относительные пути туда, где они живут, и затем вы можете включить их в том порядке, в котором вы хотите. По-видимому, это не работает с использованием SASS, если вы не используете импорт SASS.

В качестве альтернативы вы можете использовать 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));
});

Опять же, вы должны использовать первый метод, если можете, но es.concat полезен для других сценариев.

Ответ 3

я нашел это недавно gulp-cssjoin это позволяет заменить импорт встроенным css

scss

@import '../../bower_components/angular/angular-csp.css';

задача gulp

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'));
});

важной частью является прохождение путей

.pipe(cssjoin({
  paths: ['./src/sass']
}))