LINUX.ORG.RU

Сборка фронтенда: доведение до идеала

 , ,


0

1

По итогам прошлого треда я остановился на assetic.
Со временем мне надоело заниматься, как правильно заметили, луддизмом и в итоге был выбран gulp, а вместо bowerphp оригинальная реализация bower.
В целом всё устраивает, но есть некоторые моменты, в которых не всё так гладко, как хотелось бы.
Сейчас типичный проект имеет следующую структуру:

frontend/
├── node_modules/
├── public/
├── source/
├── vendor/ (вместо bower_components)
├── .bowerrc
├── bower.json
├── gulpfile.js
├── package.json
├── settings.default.json
└── settings.user.json

Всё, что лежит в public — генерируется автоматически.
Обычно это index.html, app.js, style.css и директория templates с ангуляровскими шаблонами.
Затем на public натравливается nginx и всё работает.
Минус данного подхода в том, что если нужны какие-либо иконки шрифты и прочее, то их приходится копировать из vendor.
Можно и не копировать, а сделать директорию публичной, но это не очень красиво.

Все стили и скрипты собираются в один файл следующим образом:

gulp.task('css', function () {
    gulp.src([
        'source/**/*.css',
        'vendor/primer-css/css/primer.css',
        'vendor/angular-ui-notification/dist/angular-ui-notification.min.css',
        'vendor/ngDialog/css/ngDialog.css',
        'vendor/ngDialog/css/ngDialog-theme-default.css'
    ]).pipe(
        concat('style.css')
    ).pipe(
        autoprefixer()
    ).pipe(gulp.dest('public'));
});
gulp.task('js', function () {
    gulp.src([
        'vendor/angular/angular.js',
        'vendor/angular-route/angular-route.js',
        'vendor/ngDialog/js/ngDialog.js',
        'vendor/angular-ui-notification/dist/angular-ui-notification.min.js',
        'source/**/*.js'
    ]).pipe(ngAnnotate({
        add: true,
        single_quotes: true
    })).pipe(
        concat('app.js')
    ).pipe(gulp.dest('public'));
});
gulp.task('minify', function () {
    gulp.src('public/app.js').pipe(uglify()).pipe(gulp.dest('public'));
    gulp.src('public/style.css').pipe(minifycss()).pipe(gulp.dest('public'));
    buildIndex();
});

В идеале хотелось бы иметь возможность просто указать vendor/**/*.js и vendor/**/*.css
Но так как туда попадает всякий хлам из репозитория, то это невозможно. Есть ли какие-то сдвиги в эту сторону?
В php например догадались заюзать .gitattributes.

В случае с css бывает и так, что в пакете оказываются только исходники в less или sass и минимизированные файлы.
Если я не использую ни то ни другое, то ради зависимостей устанавливать less и sass нет никакого желания.
Приходится указывать минифицированные файлы и в итоге они пропускаются через минификатор по второму кругу.

Это конечно мелочи, но я был бы рад, если эти проблемы можно решить просто и без всякого геммороя.

★★★★★

Bump что-ли

Kilte ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.