AtriSimone
@AtriSimone
Осваиваю Front-end

Как настроить сборку front-end?

Доброй ночи.
Накопал когда то gulpfile для front-end сборки. Со временем он рос и преобразовывался под мои нужды, дополнялся....
В итоге я заимел такую вот простыню:
'use strict';

var gulp        = require('gulp'),
    watch       = require('gulp-watch'),
    prefixer    = require('gulp-autoprefixer'),
    uglify      = require('gulp-uglify'),
    sass        = require('gulp-sass'),
    sourcemaps  = require('gulp-sourcemaps'),
    rigger      = require('gulp-rigger'),
    cssmin      = require('gulp-clean-css'),
    concat      = require('gulp-concat'),
    imagemin    = require('gulp-imagemin'),
    pngquant    = require('imagemin-pngquant'),
    sprite      = require('gulp.spritesmith'),
    rimraf      = require('rimraf'),
    browserSync = require("browser-sync"),
    jade        = require('gulp-jade'),
    plumber     = require('gulp-plumber'),
    reload      = browserSync.reload;


var path = {
    build: { //Тут мы укажем куда складывать готовые после сборки файлы
        html:  'build/',
        js:    'build/js/',
        css:   'build/styles/',
        img:   'build/images/',
        fonts: 'build/fonts/'
    },
    src: { //Пути откуда брать исходники
        html:  'src/*.jade',
        js: [
            'src/js/*.js'
        ],
        style: [
          'bower_components/normalize-css/normalize.css',
          'src/style/**/*.scss',
          'src/style/**/*.css'
        ],
        img:   'src/img/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
        html:  'src/**/*.jade',
        js:    'src/js/**/*.js',
        style: 'src/style/**/**/*.*',
        img:   'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    clean: './build'
};

var config = {
    server: {
        baseDir: "./build"
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: "Front-End"
};


gulp.task('html:build', function () {
    gulp.src(path.src.html) //Выберем файлы по нужному пути
        .pipe(plumber())
        .pipe(jade()) //Прогоним через rigger
        .pipe(gulp.dest(path.build.html)) //Выплюнем их в папку build
        .pipe(reload({stream: true})); //И перезагрузим наш сервер для обновлений
});

gulp.task('js:build', function () {
    gulp.src(path.src.js) //Найдем наш main файл
      .pipe(plumber())
      .pipe(rigger()) //Прогоним через rigger
        .pipe(concat('main.js'))
        .pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(gulp.dest("temp/"))
        .pipe(uglify()) //Сожмем наш js
        .pipe(sourcemaps.write()) //Пропишем карты
        .pipe(gulp.dest(path.build.js)) //Выплюнем готовый файл в build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('style:build', function () {
    gulp.src(path.src.style) //Выберем наш main.scss
      .pipe(plumber())
      .pipe(sourcemaps.init()) //То же самое что и с js
        .pipe(concat("main.scss"))
        .pipe(prefixer()) //Добавим вендорные префиксы
        .pipe(gulp.dest("temp/")) // сохраняем полученный файл в нужной директории
        .pipe(sass('temp/main.scss'))
        .pipe(cssmin()) //Сожмем
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css)) //И в build
        .pipe(reload({stream: true}));
});

gulp.task('image:build', function () {
    gulp.src(path.src.img) //Выберем наши картинки
        .pipe(imagemin({ //Сожмем их
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.build.img)) //И бросим в build
        .pipe(reload({stream: true}));
});

gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts))
});

gulp.task('build', [
    'html:build',
    'js:build',
    'style:build'
]);

gulp.task('pre-build', [
    'fonts:build',
    'sprite',
    'image:build'
]);

gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
});

gulp.task('webserver', function () {
    browserSync(config);
});

gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

gulp.task('sprite', function() {
  var spriteData =
    gulp.src('./src/img/sprite/*.*') // путь, откуда берем картинки для спрайта
      .pipe(sprite({
        imgName: 'sprite.png',
        cssName: '5_sprite.css',
      }));

  spriteData.img.pipe(gulp.dest('./src/img/'));  // путь, куда сохраняем картинку
  spriteData.css.pipe(gulp.dest('./src/style/1_main-styles'));  // путь, куда сохраняем стили
});

gulp.task('default', ['build', 'webserver', 'watch']);

Сейчас при старте нового проекта пишу: npm i и долго жду попутно рассматривая красивые предупреждения в консоли о разных пакетах, которые я использую - что то устарело и пр.
Где то на днях видел на тостере мимолетом о том что сейчас юзают gulp 4, что есть там какие то плюшки ускоряющие сборку, а еще сборщик теперь не в одном gulpfile, а красиво разбит на несколько файлов и собирать можно для разработки(там картинки не жмутся и еще что то не жмется в отличии от продакшена) и отдельно сборка на продакшн(жмет все по максимуму), но найти не смог потом я этого на тостере, да и не нагуглил ничего толком кроме скринкаста от Ильи Кантора.
Подскажите что почитать/где посмотреть что бы переписать/написать по новой gulpfile с учетом новых возможностей gulp не растеряв старых добрых удобных тасков своих. А может кто заготовку покажет толковую?
  • Вопрос задан
  • 6845 просмотров
Пригласить эксперта
Ответы на вопрос 5
Machinez
@Machinez
А чем вас не устроил скринкаст Кантора? рассматривает галп 4 очень глубоко и доходчиво, лучше вы не найдете.
Почитайте документацию

От перехода на галп 4 скорость установки модулей и количество предупреждений не уменьшится.

Можете взять что-то из моей сборки, многое получено из скринкаста
Ответ написан
AMar4enko
@AMar4enko
Использовать webpack :D
Ответ написан
@itsjustmypage
Чтобы не устанавливать каждый раз пакеты, можно попробовать установить все локальные пакеты глобально (npm install <пакет> -g -D). Все Gulp задачи можно разбить по отдельным файлам, это же js.
Сделать 2 вида сборки - на продакшн и для себя можно так же в js через отдельные таски.

Вот пример такой сборки. alexfedoseev.com/post/54/frontend-project-build
Ответ написан
@sgrogov
Посмотрите шаблон для быстрого старта от csssr https://github.com/CSSSR/csssr-project-template. Все задачи написаны на es2015 синтаксисе, используется кеширование для ускорения сборки, таски разбиты на отдельные файлы, статичные данные вынесены в json, готов к использованию svg, есть retina-спрайты, вовсю используется БЭМ. Много плюшек, разве что на windows могут быть проблемы с установкой зависимостей (впрочем это проблема не самого шаблона, а некоторых модулей в npm).
Ответ написан
Комментировать
artemmalko
@artemmalko
Frontend developer 2gis
Я порекомендую изучить, как это реализовано в TARS!
О том, как это все работает можно узнать из доклада (https://vimeo.com/123924728 20 минута) или из доков к TARS, там все очень подробно описано + есть статьи на хабре.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы