Nano Hash - криптовалюты, майнинг, программирование

gulp sass исходная карта

Мне нужна помощь в добавлении исходной карты в компилятор SASS в той же выходной папке CSS. До сих пор мне приходилось устанавливать модуль gulp-sourcemaps в gulpfile.js, но я не мог знать, как связать sourcemaps.write как gulp.task.

Любая помощь высоко ценится :)

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.js sass gulp gulp-sass
18.07.2016

Ответы:


1

Попробуйте этот код для задачи 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
        }));
});

Сначала инициализируйте исходные карты, затем скомпилируйте sass(), после чего запишите исходную карту в ту же папку ('.')

С уважением

18.07.2016

2

Я использую эту задачу с 5 месяцев каждый день и отлично работает,

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

});

Также рекомендуем вам require('gulp-csso') для производственной версии

19.07.2016
  • мой работал после добавления {includeContent: false} внутрь sourcemaps.write(). Можете ли вы объяснить, что это такое? 12.07.2020
  • Привет @weber, если я не ошибаюсь (старый пост), путь по умолчанию /source/, вы должны установить includeContent: false, чтобы сделать возможными пользовательские пути. для получения дополнительной информации см. официальный документ github.com/gulp-sourcemaps/gulp-sourcemaps 15.07.2020

    • 3

    Полное решение для gulp-sass, map, count all files, minify:

    ./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']);
})
    13.03.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..