web-dev-qa-db-fra.com

carte source gulp sass

J'ai besoin d'aide pour ajouter la carte source au compilateur SASS dans le même dossier de sortie CSS. Jusqu'à présent, je dois installer le module gulp-sourcemaps dans gulpfile.js mais n'a pas réussi à lier sourcemaps.write comme gulp.task.

Toute aide est très appréciée :)

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var bs = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
    server: {
        baseDir: "./"
    },
    proxy: {
        target: "localhost:8080", // can be [virtual Host, sub-directory, localhost with port]
        ws: true // enables websockets
    }
});
});

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css'))
        .pipe(bs.reload({
            stream: true
        }));
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.php").on('change', bs.reload);
});
node.jssassgulpgulp-sass
18
user1556571

Essayez ce code pour la tâche gulp 'sass':

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css'))
        .pipe(bs.reload({
            stream: true
        }));
});

Commencez par lancer les sourcemaps puis compilez sass () après avoir écrit le sourcemap dans le même dossier ('.')

Cordialement

17
jseezo

J'utilise cette tâche depuis 5 mois tous les jours et fonctionne très bien,

const gulp            = require('gulp'),
      autoprefixer    = require('gulp-autoprefixer'),
      plumber         = require('gulp-plumber'),
      sass            = require('gulp-sass'),
      sourcemaps      = require('gulp-sourcemaps');

var sassSourcePath = 'YourPath/scss/**/*.scss',
    cssDestPath    = 'YourPath/css/';


gulp.task('sass', () => {

  return gulp
    .src(sassSourcePath)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(cssDestPath));

});

Vous recommande également la require('gulp-csso') pour la version de production

6
Héctor León

Une solution complète pour gulp-sass, cartographier, compter tous les fichiers, minimiser:

./sass/partial_folders/index.scss

@import 'base/_reset';
@import 'helpers/_variables';
@import 'helpers/_mixins';
@import 'helpers/_functions';
@import 'base/_typography';
etc..

./gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function(){
    return gulp
            .src('sass/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(concat('styles.css'))
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./build/css/'));
});


gulp.task('default', function(){
    gulp.watch('sass/**/*.scss', ['styles']);
})
2
Carnaru Valentin