web-dev-qa-db-fra.com

Utilisation de Gulp pour compiler Sass et réduire les css des fournisseurs

Se familiariser avec Gulp et poser une question.

J'ai donc une tâche CSS gulp comme celle ci-dessous qui fonctionne très bien:

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

Mais existe-t-il un moyen d'ajouter mes fichiers fournisseurs comme Bootstrap donc il sera inclus pour la minification et la concaténation.

J'espère que vous pourrez conseiller.!

csssassgulp
32
Lee

gulp-sass répondra à votre demande. Veuillez me montrer comment compiler des fichiers Sass et réduire (ou compresser) les fichiers css compilés:

  • installez gulp-sass depuis ici
  • dans gulpfile.js de votre projet, ajoutez le code suivant:

Remarque: outputStyle dans gulp-sass a quatre options: nested, expanded, compact, compressed

Ça marche vraiment, je l'ai utilisé dans mon projet. J'espère que ça aide.

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

Pour rappel le readme

60
aisin

Je peux penser à deux solutions. Je pense que la meilleure option est d'utiliser @import instructions dans votre fichier Sass pour inclure les fichiers du fournisseur. Utilisez des chemins d'accès relatifs à leur lieu de résidence et vous pouvez ensuite les inclure dans l'ordre de votre choix. Apparemment, cela ne fonctionne pas avec SASS, sauf si vous utilisez des importations SASS.

Vous pouvez également utiliser event-stream et gulp-concat pour concaténer des flux de fichiers. Dans ce cas, vous ne devez pas utiliser gulp-sass pour compresser les fichiers, utilisez plutôt quelque chose comme gulp-csso pour gérer la compression.

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

Encore une fois, vous devez utiliser la première méthode si vous le pouvez, mais es.concat est utile pour d'autres scénarios.

23
OverZealous

je l'ai trouvé récemment gulp-cssjoin cela vous permet de remplacer les importations par des css en ligne

le scss

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

la tâche de gorgée

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

l'important est le passage des chemins

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