同じCSS出力フォルダー内のSASSコンパイラーにソースマップを追加する方法が必要です。今までは、gulpfile.js
内にgulp-sourcemapsモジュールをインストールする必要がありましたが、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);
});
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()をコンパイルしてから、同じフォルダー( '。')にソースマップを書き込みます
よろしく
私はこのタスクを毎日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')
をお勧めします
Gulp-sass、map、すべてのファイルのカウント、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']);
})