Sourse map для gulp, как правильно собрать файлы less в main.css чтобы в браузере просматривать исходники?

Question

[Никита]

помогите правильно прописать правила для gulp

Answer 1

[Матвей Феникс]

Пример с sass, для less все идентично (ну или почти).
1) Собрали файлы в из многих в один через import https://github.com/mtvphnx/gulp-start/blob/master/...
2) Поставили в сборку https://www.npmjs.com/package/gulp-sourcemaps
3) Прописали в галпфайле const sourcemaps = require('gulp-sourcemaps') и в таске вызвали запись карты:

function имя_таска() {
    return gulp
        .src('путь_где_лежит_нужный_стиль.расширение')
        .pipe(sourcemaps.init())
        // тут что-то делаем
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('путь_до_папки_куда_кидаем'));
}

- пример галпфайла https://github.com/mtvphnx/gulp-start/blob/master/...

Comments

[Никита]

вылетает ошибка

Potentially unhandled rejection [2] 'project/content/**/*.less' wasn't found. Tried - app\less\project\content\**\*.less,project\content\**\*.less in file app\less\structure.less line no. 17

[Матвей Феникс]

Никита, ругается на путь. Проверь, правильно ли ты его указал. Или скинь ссылку на репозиторий со сборкой.

[Никита]

Матвей Феникс,

// CSS
gulp.task('less', function () {
	return gulp.src([
			'app/less/structure.less',
			'!app/less/**/_*.less'
		])
		.pipe(sourcemaps.init())
		.pipe(plumber(function (error) {
			gutil.log(error.message);
			this.emit('end');
		}))
		.pipe(lessGlob())
		.pipe(less())
		.pipe(autoprefixer(['last 15 versions', '> 1%', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']))
		.pipe(plumber.stop())
		.pipe(rename('main.css'))
		.pipe(gulp.dest('app/css'))
		.pipe(sourcemaps.write('.'))
		.pipe(browserSync.reload({
			stream: true
		}));
});

пути поправил, но сейчас карты не создаются. что делаю не так?

[Матвей Феникс]

Никита, попробуй .pipe(sourcemaps.write('.')) вызвать после .pipe(less()).
Если не поможет - то попробуй еще и заменить .pipe(sourcemaps.write('.')) на .pipe(sourcemaps.write())

[Никита]

Матвей Феникс, спасибо, помогло!!!

[Матвей Феникс]

Никита, не за что)
Не забудь отметить решением)

[Никита]

Матвей Феникс, а ещё, есть такая штука как autosave DevTools, можно ли сделать так, чтобы изменения сохранялись в less файлах, а не только в main.css. Ну или что бы изменения из main ещё и в less обратно шли

[Матвей Феникс]

Никита, не пробовал такую штуку ставить, увы