Gulp + Sourcemaps + PostCSS (Автопрефиксер + Минификация через CSSnano) - PullRequest
Новая
       97

Gulp + Sourcemaps + PostCSS (Автопрефиксер + Минификация через CSSnano)

0 голосов
/ 07 ноября 2018

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

  • site.css
  • site.min.css
  • site.css.map
  • site.css.min.map

В настоящее время я получаю только:

  • site.css
  • site.min.css
  • site.css.min.map

Я знаю, что мой сценарий глотка неверен, но я не знаю, как это исправить. Мне нужны исходные карты для записи исходной карты в site.css до того, как будет создан site.min.css. HALP! и спасибо 

gulp.task('scss', gulp.series('bootstrap:scss', function compileScss() {
	return gulp.src(['./site/assets/scss/*.scss'])
		.pipe(sourcemaps.init())
		.pipe(sass.sync({
			outputStyle: 'expanded'
		}).on('error', sass.logError))
		.pipe(gulp.dest('./site/dist/css'))  // outputs site.css
		.pipe(postcss([autoprefixer(), cssnano()
		]))
		.pipe(sourcemaps.write('.'))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(gulp.dest('./site/dist/css'))  //outputs site.min.css
}));

1 Ответ

0 голосов
/ 10 мая 2019

Вам нужны только исходные карты для вашей неунифицированной версии, я хотел бы ввести NODE_ENV для выполнения минимизации и исходных карт, а затем использовать gulp-if , чтобы увидеть, находитесь ли вы в среде разработки или рабочей среде

В качестве альтернативы у вас могут быть отдельные задачи сборки и разработки.

Использование process.env.NODE_ENV означает, что вы можете использовать их в postcss.config.js файлах и т. Д.

Я нашел этот действительно хорошим, потому что он показывает, как вы можете использовать файл gulp.babel.js с Gulp 4. Я использовал 3.9.1, не желая обновляться до этой недели, но это очень помогло с пониманием изменений от v3> 4.

...