4

Есть небольшая 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>
2
  • @Alexandr_TT, сам svg и масштабирование тут не при чем))))
    – SVE
    2 янв 2019 в 6:44
  • Так что за решение-то?
    – Grundy
    19 янв 2019 в 16:14

1 ответ 1

2

Как альтернатива, но не решение. Пришлось отказаться от 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 не нужны.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.