Gulp sourcemaps и проблемы с sass

Я пытаюсь объединить все мои файлы стилей (css, scss) в один файл и скомпилировать. Причина в том, что есть файлы, основанные на переменных в другом файле, но теперь я не могу создать исходную карту.

Что я делаю не так? Есть ли лучшее решение?

const gulp = require('gulp');
const debug = require('gulp-debug');
const sass = require('gulp-sass');
const concat = require('gulp-concat');  
const uglify = require('gulp-uglify');  
const csso = require('gulp-csso');
const autoprefixer = require('gulp-autoprefixer');
const addsrc = require('gulp-add-src');
const sourcemaps = require('gulp-sourcemaps');
const ngmin = require('gulp-ngmin');
const browserSync = require('browser-sync');

gulp.task('default', ['browser-sync'], function(){
    gulp.watch('app/**/*.scss', ['styles']);
    gulp.watch('app/**/*.js', ['app-scripts']);
    gulp.watch('app/components/**/*.html', ['components-html']);
    gulp.watch('app/views/**/*.html', ['view-html']);
    gulp.watch('app/index.html', ['copy-index-html']);
    gulp.watch('app/json/**/*.json', ['copy-jsons']);
});

gulp.task('styles', () => 
    gulp.src([
        'app/style/vendors/*.css',
        'app/style/utils/*.scss',
        'app/style/base/*.scss',
        'app/style/layout/*.scss',
        'app/components/**/*.scss',
        'app/views/**/*.scss'
    ])
    .pipe(concat('styles.scss'))
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(concat('styles.min.css'))
    .pipe(gulp.dest('dist/style'))
);

gulp.task('copy-fonts', () =>
   gulp.src('app/assets/fonts/**/*.{ttf,woff,eof,svg}')
        .pipe(gulp.dest('dist/style/fonts'))
);

gulp.task('copy-images', () =>
   gulp.src('app/assets/img/**/*.{png,jpg,jpeg,svg}')
        .pipe(gulp.dest('dist/img'))
);

gulp.task('copy-index-html', () =>
    gulp.src('app/index.html')
        .pipe(gulp.dest('dist'))
);

gulp.task('components-html', () =>
    gulp.src(['app/components/**/*.html'])
        .pipe(gulp.dest('dist/components'))
);

gulp.task('view-html', () =>
    gulp.src('app/views/**/*.html')
        .pipe(gulp.dest('dist/views'))
);

gulp.task('copy-jsons', () =>
   gulp.src('app/json/**/*.json')
        .pipe(gulp.dest('dist/json'))
);

gulp.task('app-scripts', () =>
    gulp.src(['app/*.js', '!app/app.js'])
        .pipe(addsrc.append([
            'app/services/**/*.js',
            'app/views/**/*.js',
            'app/directives/**/*.js',
            'app/components/**/*.js'
        ]))
        .pipe(addsrc.prepend('app/app.js'))
        .pipe(ngmin())
        .pipe(concat('app.min.js'))
        .pipe(gulp.dest('dist/js'))
);

gulp.task('vendor-scripts', () =>
    gulp.src(['app/vendor/angular/*.js', '!app/vendor/angular/angular.js'])
        .pipe(addsrc.prepend('app/vendor/angular/angular.js'))
        .pipe(addsrc.append('app/vendor/*.js'))
        .pipe(uglify())
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest('dist/js'))
);

gulp.task('browser-sync', () => 
    browserSync({
        files: 'dist/**/*.css, dist/**/*.js, app/**/*.html',
        port: 8082
    })
);

person Zeev Katz    schedule 26.04.2017    source источник
comment
Не могли бы вы опубликовать весь gulpfile?   -  person Khang Lu    schedule 02.05.2017
comment
Почему вам нужно видеть весь gulpfile?   -  person Zeev Katz    schedule 02.05.2017
comment
Я хотел бы воспроизвести и запустить весь gulpfile.js. Это может быть связано с тем, как вы импортируете и инициализируете исходную карту gulp или как вы запускаете задачу, которая может вызвать проблему. С текущим фрагментом кода единственное, что я могу предложить, это переместить .pipe(sass()) выше .pipe(concat('styles.scss')).   -  person Khang Lu    schedule 02.05.2017
comment
Отредактируйте мой вопрос. то, что вы говорите, это единственный известный мне способ, но я не могу этого сделать, потому что я собираю много файлов sass, которые основаны на переменных и микшированиях в другом файле.   -  person Zeev Katz    schedule 02.05.2017
comment
Попробуйте импортировать все ваши файлы .scss и .css в файл main.scss и поместите только этот файл main.scss в файл gulpfile. Попробуйте импортировать в правильном порядке, чтобы все ваши переменные и миксы работали.   -  person Khang Lu    schedule 02.05.2017
comment
Но тогда мне нужно будет вручную добавлять в main.scss каждый новый файл. :/   -  person Zeev Katz    schedule 02.05.2017
comment
Я считаю, что это рекомендуемая структура. Я использую его в своих текущих проектах. Например, у меня есть 3 файла variables, font, mixins в моей папке standards, и, поскольку моим файлам font и mixins нужен доступ к переменным, мне нужно импортировать их в этом конкретном порядке в мою папку main.scss. Если бы я только установил путь в gulp на /standards/*.scss, он не обработал бы файлы в определенном порядке и, следовательно, сбил бы с толку компилятор. Следуя этой структуре, вы сможете сделать свой проект логичным и понятным.   -  person Khang Lu    schedule 02.05.2017


Ответы (1)


Обычной практикой является создание файла main.scss, из которого вы импортируете другие таблицы стилей по мере необходимости. Использование этой техники поможет вам лучше организовать ваши зависимости. Например, если у вас есть следующая структура:

--app/style/
  --vendors/
    --vendors.scss
  --utils/
    --utils.css
  --base/
    --base.scss
    --variables.css //here are all my variables

Просто создайте файл main.scss в разделе app/styles, который будет импортировать все остальные ваши файлы:

@import 'base/variables'; //note that the order is important for variables
@import 'vendors/vendors';
@import 'base/base';

теперь вы заметили, что мы не указываем расширение файла? это важно, так как вы захотите изменить свои файлы .css на файлы .scss, и, более того, вы захотите добавить подчеркивание (_) ко всем файлам, которые не являются main.scss (подробнее об этом читайте здесь), таким образом вы убедитесь, что компилятор sass не создает кучу css, и вашим единственным выходом будет файл main.css.

Таким образом, вы получите исходные карты, которые вам нужны, обратите внимание, что в настоящее время вы не запускаете свои файлы .css через какую-либо задачу sass, поэтому вы не получите исходные карты для этих файлов.

Кажется, что нужно проделать много работы, если ваш проект уже большой, но это избавит вас от многих проблем, когда ваше приложение станет больше.

person randomguy04    schedule 05.05.2017
comment
Спасибо за ваш ответ! Я нашел решение для импорта нескольких файлов с помощью gulp bulksass, и теперь оно работает отлично! - person Zeev Katz; 05.05.2017