Использование Gulp и minified CSS/JS

Question

Недавно я начал использовать Gulp для автоматического определения, minifycss и минимизации моего JS. Прямо сейчас, все файлы, которые получают autofrefixed, minified, находятся в папке dist. Есть ли способ, я могу указать HTML файл в эту уменьшенной версии без ручного перепечатывания следующего:

<script src="js/custom.js"></script> 

к:

<script src="dist/custom.min.js"></script> 

туда и обратно?

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

Answer 1

Вы должны посмотреть на использование source maps. Из этой статьи:

В принципе, это способ сопоставить объединенный/мини-файл с незастроенным состоянием. Когда вы создаете для производства, наряду с минимизацией и объединением ваших файлов JavaScript, вы создаете исходную карту, в которой содержится информация о ваших исходных файлах. Когда вы запрашиваете определенную строку и номер столбца в сгенерированном JavaScript, вы можете выполнить поиск на исходной карте, которая возвращает исходное местоположение. Инструменты разработчика (в настоящее время ночные сборки WebKit, Google Chrome или Firefox 23+) могут автоматически анализировать исходную карту и делать ее видимой, как если бы вы запускали unminified и uncombined файлы.

gulp-sourcemaps - то, что вам нужно использовать. Вы не указываете, какие плагины вы используете, но есть хороший шанс, что они have support for source maps.

Вот простой пример того, как вы могли бы использовать:

var gulp = require('gulp'); 
var minify = require('gulp-uglify'); 
var sourcemaps = require('gulp-sourcemaps'); 

gulp.task('minify', function() { 
    gulp.src('src/*.js') 
     .pipe(sourcemaps.init()) // Initialize the source maps. 
     .pipe(minify())    // Do your minification, concatenation, etc. 
     .pipe(sourcemaps.write()) // Write the source maps. 
     .pipe(gulp.dest('dist')); // Write the minified files. 
}); 

Просто убедитесь, что исходные файлы unminified также является сервер на вашем веб-сервере, так что браузер может загрузить их.

Это также имеет дополнительное преимущество в том, что при тестировании веб-страницы во время разработки вы фактически запускаете мини-код, который вы в конечном итоге развертываете.

Answer 2

Вы можете попробовать глотка замена плагина написать задачу, что-то вроде этого:

var replace = require('gulp-replace') 
gulp.task('adoptDist', function() { 
    return gulp.src(paths.dest + '/www/**/*.html', { base: paths.dest }) 
     .pipe(replace(/src="js\/(.+?)\.js"/g, function(match, $1) { 
      return 'src="dist/' + $1 + '.min.js"' 
     })) 
     .pipe(gulp.dest(paths.dest)) 
});