11

Есть небольшой проект:

www
 |__ app
      |__ css
      |__ js
      index.html

 |__ dist
     |__ css
     |__ js
     index.html

 gulpfile.js

Стили и скрипты собираю gulp-useref .

Содержимое index.html:

<!-- build:css css/vendor/vendor.css -->
        <link rel="stylesheet" href="css/vendor/normalize.min.css">           
        <link rel="stylesheet" href="css/vendor/jquery.fancybox.css">       
        <link rel="stylesheet" href="css/vendor/slick.css">    
<!-- endbuild -->

<!-- build:css css/style.css -->
        <link rel="stylesheet" href="css/style.css">
<!-- endbuild -->


...


<!-- build:js js/vendor/vendor.js -->        
        <script src="js/vendor/jquery-1.11.2.min.js"></script>
        <script src="js/vendor/jquery.fancybox.js"></script>               
        <script src="js/vendor/slick.min.js"></script> 
<!-- endbuild -->

    <!-- Main script -->
<!-- build:js js/main.js -->
        <script src="js/main.js"></script>
<!-- endbuild -->

После build скрипты и стили минифицируются.

gulpfile.js:

'use strict';

var gulp          = require('gulp'),
    uncss         = require('gulp-uncss'),
    gulpif        = require('gulp-if'),
    autoprefixer  = require('gulp-autoprefixer'),
    cleanCSS      = require('gulp-clean-css'),
    uglify        = require('gulp-uglify'),
    useref        = require('gulp-useref'),
    watch         = require('gulp-watch');

   // Пути
   var path = {
             app : {          // Исходники
                    html   : 'app/*.html',
                    css    : 'app/css/*.css',
                    js     : 'app/js/*.js',
                    images : 'app/images/**/*.*',
                    fonts  : 'app/fonts/**/*.*'
                   },
            dist : {         // Релиз
                    html   : 'dist/',
                    css    : 'dist/css/**/*.css',
                    js     : 'dist/js/',
                    images : 'dist/images/',
                    fonts  : 'dist/fonts/'
                    },
           watch : {        // Наблюдение
                    html   : 'app/**/*.html',
                    css    : 'app/css/**/*.css',
                    js     : 'app/js/**/*.js',
                    images : 'app/images/**/*.*',
                    fonts  : 'app/fonts/**/*.*'
                   }
              };

        // Работа с HTML
       gulp.task('html',  function(){
         gulp.src(path.app.html)        
             .pipe(useref())
             .pipe(gulpif('*.js', uglify()))        
             .pipe(gulpif('*.css', cleanCSS()))        
             .pipe(gulp.dest(path.dist.html));
       });

       // Работа с CSS
      gulp.task('css', ['html'], function(){
        gulp.src(path.dist.css)
            .pipe(uncss({ html: [ '*.html' ] }))
            .pipe(gulp.dest(path.dist.css));
      });


     // Наблюдение
    gulp.task('watch', function () {    
      gulp.watch(path.watch.html, ['html']);
      gulp.watch(path.dist.css, ['css']);
    });

    // Задачи по-умолчанию
    gulp.task('default', [  
                  'html',
                   'css'
    ]);

Возникла проблема с gulp-uncss.

Если прописать в таске .pipe(gulpif('*.css', uncss({ html: [ '*.html' ] }))), то сборка проходит нормально, но стили удаляются из app/index.html.

Пыталась задать .pipe(gulpif('*.css', uncss({ html: [ 'dist\*.html' ] }))) – тоже самое все.

Вопрос:

Как поправить gulpfile.js чтобы стили и скрипты собирались gulp-useref, минифицировались и + применялся корректно gulp-uncss (уже для собранного style.css)?

1 ответ 1

5

Не советую использовать uncss. Он удаляет не лишние стили, а те, которые не присутствуют в index.html или других .html файлах которые вы указали. А если у вас будут класcы, которые добавляет js то он их тоже удалит. Им разве что класы с бутстрапа какого то удалять, но тоже может быть проблема выше, да и сейчас оптимизация загрузки css не самое важное дело.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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