Помощь в создании тасков для Gulp, правильная ли логика?

Поставил перед собой задачу сделать стартовый шаблон для верстки относительно простых и ненагруженных landing page. Посмотрев достаточно примеров, выбрал необходимые на мой взгляд плагины и библиотеки.
Структура проекта
ee3770aec1f14b8cbc73cf6c31158870.png

Файл package.json
{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.6",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean-css": "^2.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.3.0",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.11"
  },
  "dependencies": {
    "font-awesome": "^4.7.0"
  }
}


Файл bower.json
{
  "name": "project",
  "version": "1.0.0",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "normalize.css": "*",
    "jquery": "2.*",
    "bootstrap-sass": "*"
  }
}


Файл gulpfile.js
var gulp = require('gulp'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    cleancss = require('gulp-clean-css'),
    concatcss = require('gulp-concat'),
    imagemin = require('gulp-imagemin'),
    browserSync = require("browser-sync");

//Пути к папкам
var serverPath  = 'src';

var path = {
        build: { 
            html: 'build/',
            js: 'build/js/',
            css: 'build/css/',
            img: 'build/img/',
            fonts: 'build/fonts/'
        },
        src: { 
            html: 'src/*.html', 
            js: 'src/js/main.js',
            style: 'src/style/main.scss',
            img: 'src/img/**/*.*',
            fonts: 'src/fonts/'
        },
        watch: { 
            html: 'src/**/*.html',
            js: 'src/js/**/*.js',
            style: 'src/style/**/*.scss',
            img: 'src/img/**/*.*',
            fonts: 'src/fonts/'
        },
        bower: {
            bootstrap: 'bower_components/bootstrap-sass'
            jquery: 'bower_components/jquery'
            normalize: 'bower_components/normalize.css'
        }
};


//Копирование Bootstrap в рабочую папку
gulp.task('copy-bootstrap', function () {
  gulp.src(path.bower.bootstrap + '/assets/**/*')
    .pipe(gulp.dest('src/sass/bootstrap'));


});

//Копирование Jquery в рабочую папку
gulp.task('copy-jquery', function () {
  gulp.src(path.bower.jquery + '/dist')
    .pipe(gulp.dest(src.js + '/jquery'));


});

//Копирование Normalize в рабочую папку
gulp.task('copy-normalize', function () {
  gulp.src(path.bower.normalize + '/normalize.css')
    .pipe(gulp.dest('src/sass/'));


});

//Копирование font-awesome
gulp.task('copy-font-awesome', function () {
    gulp.src('node_modules/font-awesome/fonts') 

        
});

//Сборка html
gulp.task('html', function () {
    gulp.src(path.src.html) 
        .pipe(gulp.dest(path.build.html)) 
        .pipe(reload({stream: true})); 
});

//Сборка js
gulp.task('js', function () {
    gulp.src() 


});

//Cборка sass
gulp.task('sass', function () {
    gulp.src() 

        
});

//Сборка шрифтов
gulp.task('fonts', function () {
    gulp.src() 

        
});

//Сжатие изображений
gulp.task('image', function () {
    gulp.src(path.src.img) 
        .pipe(imagemin({ 
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.build.img)) 
        .pipe(reload({stream: true}));
});

//Запуск gulp
gulp.task('build', ['html', 'js', 'sass', 'fonts', 'image']);

gulp.task('serve', ['build'], function() {
    browserSync({
        port: 3000,
        notify: false,
        logPrefix: 'Project',
        server: {
            baseDir: serverPath,
            index: 'index.html'
        }
    });

    gulp.watch(serverPath + '/index.html', browserSync.reload);
    gulp.watch();
    gulp.watch();
});


Для начала интересно узнать, все ли самые необходимые плагины присутствуют (может какие еще стоит закинуть), правильно ли я делаю перенос файлов из bower_components и node_modules, и вообще нормально ли выстроил все?
Как разобраться с sass файлами стилей bootstrap, шрифтами fontawesome, и стандартными плагинами jquery из bootstrap? Приблизительно даже не нашел адекватного примера для такого таска.
  • Вопрос задан
  • 1814 просмотров
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега Вёрстка
Пока ты спишь - твой конкурент совершенствуется
я бы еще добавил gulp-rigger для сборки html. для подключения шаблонов типа: //= template/footer.html
а еще ты каждый подключенный плагин обрабатываешь вручную. советую gulp-main-bower-files, который вернет все твои bower компоненты. и там уже можешь делать че хочешь. объединить и минифицировать к примеру.
Ответ написан
@kleilike
Можешь еще посмотреть скринкаст Ильи Кантора по Gulp 4.0
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы