Есть небольшая gulp сборка для проекта.
Плагины:
gulpfile.js:
var
gulp = require('gulp'),
...
var path = {
app : { // Исходники
html : 'app/*.html',
js : 'app/js/*.js',
svg : 'app/**/*.svg',
},
dist : { // Релиз
html : 'dist/',
js : 'dist/js/',
},
watch : { // Наблюдение
html : 'app/**/*.html',
svg : 'app/**/*.svg',
js : 'app/js/**/*.js',
}
};
// Настройка сервера
var config = {
server : {
'baseDir' : './dist'
},
host : 'localhost',
port : 9000,
tunel : true,
};
// Работа с HTML
gulp.task('html', ['svg'], function(){
gulp.src(path.app.html)
.pipe(rigger())
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(inject(svgContent, { transform: fileContents }))
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream : true}));
});
// Работа с JS
gulp.task('js', function(){
gulp.src(path.app.js)
.pipe(gulp.dest(path.dist.js))
.pipe(reload({stream : true}));
});
// Работа с SVG
function fileContents (filePath, file) {
return file.contents.toString();}
var svgContent = gulp.src(path.app.svg)
.pipe(svgmin())
.pipe(svgstore({ inlineSvg: true }))
.pipe(reload({stream : true}));
gulp.task('svg', function () {
var svgs = svgContent;
});
// Наблюдение
gulp.task('watch', function () {
watch([path.watch.html], function(event, cb){
gulp.start('html');
});
watch([path.watch.html], function(event, cb){
gulp.start('svg');
});
watch([path.watch.js], function(event, cb){
gulp.start('js');
});
});
// Запуск вебсервера
gulp.task('webserver', function(){
browserSync(config);
});
// Чистка
gulp.task('clean', function(cb){
clean(path.clean, cb);
});
// Задачи по-умолчанию
gulp.task('default', [
'html',
'svg',
'js',
'webserver',
'watch'
]);
html:
...
<div style="height: 0; width: 0; position: absolute; visibility: hidden">
<!-- inject:svg --><!-- endinject -->
</div>
...
<!-- build:js js/vendor.js -->
<script src="libs/jquery/jquery-2.1.3.min.js"></script>
...
<!-- endbuild -->
Все работает неплохо, до изменений в html файле. Любое изменение приводит к исчезновению скомпилированного инлайн svg
файла внутри html файла (внутри inject).
Вопрос: Можно ли настроить gulpfile.js так, чтобы можно было вносить изменения в html файл без перезапуска всей сборки в консоли и без потери сформированного svg спрайта внутри html файла?
Пробую так:
В gulpfile.js:
// Таск для html
gulp.task('html', function(){
gulp.src(path.app.html)
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream : true}));
});
// Таск для SVG
gulp.task('svg', function () {
var svgs = gulp.src(path.app.svg)
.pipe(svgstore({ inlineSvg: true }));
function fileContents (filePath, file) {
return file.contents.toString();
}
return gulp.src(path.app.html)
.pipe(inject(svgs, { transform: fileContents }))
.pipe(gulp.dest(path.dist.other));
});
Все работает, вебсервер перезапускается очищается с внесением изменений в любой файл html, css и сохранением svg
спрайта, НО перестал работать useref()
.
<!-- build:js js/vendor.js -->
<script src="libs/jquery/jquery-3.2.1.min.js"></script>
<script src="libs/animate/wow.min.js"></script>
....
<!-- endbuild -->
Собирает vendor.js, но не записывает в html
. А должен после генерации быть:
<script src="js/vendor.js"></script>
Как альтернатива, но не решение. Пришлось отказаться от inject svg
и заменить его на rigger.
В html:
//= svg-sprite.html
Соответственно создаю еще файл svg-sprite.html в который вставляю сгенерированный svg спрайт. Генерирую с помощью ресурса icomoon.io.
gulpfile.js:
// Work with HTML
gulp.task('html', function(){
gulp.src(path.app.html)
.pipe(rigger())
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
//.pipe(inject(svgContent, { transform: fileContents }))
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream : true}));
});
Все таски по svg
не нужны.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Не взирая на то, что спецификацию ES6 выпустили в 2015 году, даже в 2019 NodeJS всё ещё не реализует этот стандартПоддержка всё ещё экспериментальная...
Есть такой участок кода на сервереВыполняется скрипт к бд и получаются данные в ответ