Я проксирую веб-сайт через browsersync и внедряю css / js, так что я могу использовать zurb foundation и sass в размещенной среде, где у меня нет доступа к файлам HTML / SSH, так как все это сборкав редакторе на основе браузера. Так что я должен прокси, вставлять стили и JS. А потом, когда все будет готово, загрузите его. Но по какой-то причине я не могу заставить исходные карты работать с моей настройкой. Приветствуется дополнительная пара глаз.
иерархия папок:
+ assets (css + js in here)
+ node_modules
+ scss (scss in here)
вот мой глоток:
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
function style(){
return gulp.src('./scss/**/*.scss')
// sourcemaps
.pipe( sourcemaps.init( { loadMaps: true, largeFile: true } ) )
.pipe( sass({
includePaths: ['./node_modules/foundation-sites/scss'],
noCache: true,
sourceMap: true,
errLogToConsole: true
})
).on('error', sass.logError )
.pipe( autoprefixer({ browsers: ['last 2 versions', 'ie >= 8', 'android >= 4.4', 'ios >= 7'] }) )
.pipe( sourcemaps.write( './' ) )
.pipe( gulp.dest( './assets' ) )
.pipe( browserSync.stream() );
}
function watch(){
browserSync.init({
plugins: ['bs-console-qrcode'],
open: false,
proxy: "https://somedomain.com/",
files: ['assets/**'],
serveStatic: ["assets/"],
rewriteRules: [
{
match: new RegExp('somedir/inject.css'),
fn: function() {
return '/addMe.css';
}
}
],
snippetOptions: {
rule: {
match: /<\/body>/i,
fn: function (snippet, match) {
return '<script src="/js/vendor/what-input.js"></script>' +
'<script src="/js/vendor/foundation.min.js"></script>' +
'<script type="text/javascript" src="/addMe.js" ></script>' + snippet + match;
}
}
}
});
gulp.watch( './scss/**/*.scss', style );
gulp.watch( './assets/**.js' ).on( 'change', browserSync.reload );
}
exports.style = style;
exports.watch = watch;
есть идеи?