Настройка gulpfile.js
Создадим папку gulp-skeleton. В этой папке создадим файл package.json со следующим содержимым:
{
"name": "Gulp_Skeleton",
"version": "1.0.0",
"description": "Gulp 4 skeleton",
"author": "Orkhan Alyshov"
}
Переходим в папку проекта
cd gulp-skeleton
и выполняем команду:
npm install --save-dev gulp
После выполнения этой команды, в папке нашего проекта появится папка node_modules и файл package-lock.json.
Таким образом мы установили gulp. Теперь содержимое package.json выглядит так:
{
"name": "Gulp_Skeleton",
"version": "1.0.0",
"description": "Gulp 4 skeleton",
"author": "Orkhan Alyshov",
"devDependencies": {
"gulp": "^4.0.2"
}
}
Создадим новый файл в корне проекта gulpfile.js со следующим содержимым:
"use strict";
const {src, dest} = require("gulp");
const gulp = require("gulp");
Установка необходимых плагинов
- gulp-autoprefixer
npm install --save-dev gulp-autoprefixer
- gulp-cssbeautify
npm install --save-dev gulp-cssbeautify
- gulp-strip-css-comments
npm install --save-dev gulp-strip-css-comments
- gulp-html-beautify
npm install --save-dev gulp-html-beautify
- gulp-remove-html-comments
npm install --save-dev gulp-remove-html-comments
- gulp-rename
npm install --save-dev gulp-rename
- gulp-sass
npm install --save-dev gulp-sass
- gulp-cssnano
npm install --save-dev gulp-cssnano
- gulp-rigger
npm install --save-dev gulp-rigger
- gulp-uglify
npm install --save-dev gulp-uglify
- gulp-plumber
npm install --save-dev gulp-plumber
- gulp-imagemin
npm install --save-dev gulp-imagemin
- del
npm install --save-dev del
- panini
npm install --save-dev panini
- browser-sync
npm install --save-dev browser-sync
После установки этих плагинов содержимое файла package.json будет в следующем виде:
{
"name": "Gulp_Skeleton",
"version": "1.0.0",
"description": "Gulp 4 skeleton",
"author": "Orkhan Alyshov",
"devDependencies": {
"browser-sync": "^2.26.7",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-cssbeautify": "^2.0.0",
"gulp-cssnano": "^2.1.3",
"gulp-html-beautify": "^1.0.1",
"gulp-imagemin": "^6.1.1",
"gulp-plumber": "^1.2.1",
"gulp-remove-html-comments": "^1.0.1",
"gulp-rename": "^1.4.0",
"gulp-rigger": "^0.5.8",
"gulp-sass": "^4.0.2",
"gulp-strip-css-comments": "^2.0.0",
"gulp-uglify": "^3.0.2",
"panini": "^1.6.3"
}
}
Теперь нужно подключить установленные плагины в файле gulpfile.js:
"use strict";
const {src, dest} = require("gulp");
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssbeautify = require("gulp-cssbeautify");
const removeCommentsCSS = require("gulp-strip-css-comments");
const htmlbeautify = require("gulp-html-beautify");
const removeCommentsHTML = require("gulp-remove-html-comments");
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const cssnano = require("gulp-cssnano");
const rigger = require("gulp-rigger");
const uglify = require("gulp-uglify");
const plumber = require("gulp-plumber");
const imagemin = require("gulp-imagemin");
const del = require("del");
const panini = require("panini");
const browsersync = require("browser-sync").create();
Структура проекта
В корне нашего проекта gulp-skeleton создадим папку src. В этой папке будут храниться все исходники нашего проекта. В папке src создадим папку assets. В папке assets создадим папки js, sass, img. В корне папки src будут .html файлы.
Gulp таски
Напишем Gulp таски. Вот конечный вид файла gulpfile.js:
"use strict";
const {src, dest} = require("gulp");
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssbeautify = require("gulp-cssbeautify");
const removeCommentsCSS = require("gulp-strip-css-comments");
const htmlbeautify = require("gulp-html-beautify");
const removeCommentsHTML = require("gulp-remove-html-comments");
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const cssnano = require("gulp-cssnano");
const rigger = require("gulp-rigger");
const uglify = require("gulp-uglify");
const plumber = require("gulp-plumber");
const imagemin = require("gulp-imagemin");
const del = require("del");
const panini = require("panini");
const browsersync = require("browser-sync").create();
let path = {
build: {
html: "dist/",
js: "dist/assets/js",
css: "dist/assets/css",
images: "dist/assets/img"
},
src: {
html: "src/*.html",
js: "src/assets/js/*.js",
css: "src/assets/sass/style.scss",
images: "src/assets/img/**/*.{jpg,png,svg,gif,ico,webmanifest,xml}"
},
watch: {
html: "src/**/*.html",
js: "src/assets/js/**/*.js",
css: "src/assets/sass/**/*.scss",
images: "src/assets/img/**/*.{jpg,png,svg,gif,ico,webmanifest,xml}"
},
clean: "./dist"
};
/* Tasks */
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./dist/",
},
port: 3000
});
}
function browserSyncReload(done) {
browsersync.reload();
}
function html() {
panini.refresh();
return src(path.src.html, { base: "src/" })
.pipe(plumber())
.pipe(panini({
root: "src/",
layouts: "src/tpl/layouts/",
partials: "src/tpl/partials/",
data: "src/tpl/data/",
}))
.pipe(htmlbeautify({
indentSize: 4,
}))
.pipe(removeCommentsHTML())
.pipe(dest(path.build.html))
.pipe(browsersync.stream());
}
function css() {
return src(path.src.css, { base: "src/assets/sass/" })
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
overrideBrowserslist: ['last 10 versions'],
cascade: true
}))
.pipe(cssbeautify())
.pipe(removeCommentsCSS())
.pipe(dest(path.build.css))
.pipe(cssnano({
zindex: false,
discardComments: {
removeAll: true
}
}))
.pipe(rename({
suffix: ".min",
extname: ".css"
}))
.pipe(dest(path.build.css))
.pipe(browsersync.stream());
}
function js() {
return src(path.src.js, { base: "./src/assets/js/" })
.pipe(plumber())
.pipe(rigger())
.pipe(gulp.dest(path.build.js))
.pipe(uglify())
.pipe(rename({
suffix: ".min",
extname: ".js"
}))
.pipe(dest(path.build.js))
.pipe(browsersync.stream());
}
function images() {
return src(path.src.images)
.pipe(imagemin())
.pipe(dest(path.build.images));
}
function clean() {
return del(path.clean);
}
function watchFiles() {
gulp.watch([path.watch.html], html);
gulp.watch([path.watch.css], css);
gulp.watch([path.watch.js], js);
gulp.watch([path.watch.images], images);
}
const build = gulp.series(clean, gulp.parallel(html, css, js, images));
const watch = gulp.parallel(build, watchFiles, browserSync);
/* Export tasks */
exports.html = html;
exports.css = css;
exports.js = js;
exports.images = images;
exports.clean = clean;
exports.build = build;
exports.watch = watch;
exports.default = watch;
Работа с библиотеками
Рассмотрим как подключаются сторонние библиотеки при помощи npm. Разберем на примере slick-carousel.
Выполняем следующую команду:
npm install slick-carousel --save
Библиотеку мы устанавливаем с флагом --save, а не --save-dev. Потому что эта библиотека нужна для работы сайта, она не зависимость gulp плагина, которая нужна для разработки.
Наш файл package.json изменился:
{
"name": "Gulp_Skeleton",
"version": "1.0.0",
"description": "Gulp 4 skeleton",
"author": "Orkhan Alyshov",
"devDependencies": {
"browser-sync": "^2.26.7",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-cssbeautify": "^2.0.0",
"gulp-cssnano": "^2.1.3",
"gulp-html-beautify": "^1.0.1",
"gulp-imagemin": "^6.1.1",
"gulp-plumber": "^1.2.1",
"gulp-remove-html-comments": "^1.0.1",
"gulp-rename": "^1.4.0",
"gulp-rigger": "^0.5.8",
"gulp-sass": "^4.0.2",
"gulp-strip-css-comments": "^2.0.0",
"gulp-uglify": "^3.0.2",
"panini": "^1.6.3"
},
"dependencies": {
"slick-carousel": "^1.8.1"
}
}
В папке src/assets/js/components создадим файл slick.js и подключим установленную библиотеку:
//= ../../../../node_modules/slick-carousel/slick/slick.js
$(".slider").slick({
// options
})
Мы ничего не должны менять в папке node_modules!
Для стилизации можем скопировать файл node_modules/slick-carousel/slick/slick.scss в папку src/assets/sass/vendor/slick.scss.
После этого, мы можем в файле src/assets/js/app.js подключить js файл:
//= components/slick.js
а в файле src/assets/sass/style.scss подключить sass файл:
@import "vendor/slick";
Модульная работа с Bootstrap 4
Установим BS4 через npm:
npm install bootstrap --save
Вот наш файл package.json:
{
"name": "Gulp_Skeleton",
"version": "1.0.0",
"description": "Gulp 4 skeleton",
"author": "Orkhan Alyshov",
"devDependencies": {
"browser-sync": "^2.26.7",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-cssbeautify": "^2.0.0",
"gulp-cssnano": "^2.1.3",
"gulp-html-beautify": "^1.0.1",
"gulp-imagemin": "^6.1.1",
"gulp-plumber": "^1.2.1",
"gulp-remove-html-comments": "^1.0.1",
"gulp-rename": "^1.4.0",
"gulp-rigger": "^0.5.8",
"gulp-sass": "^4.0.2",
"gulp-strip-css-comments": "^2.0.0",
"gulp-uglify": "^3.0.2",
"panini": "^1.6.3"
},
"dependencies": {
"bootstrap": "^4.3.1",
"slick-carousel": "^1.8.1"
}
}
В папке node_modules/bootstrap/scss находятся все исходные файлы для модульной разработки. Мы можем подключать отдельные компоненты. Если нужна только сетка bootstrap - подключаем компонент сетки, если нужны только кнопки - подключаем компонент для кнопок и т.д. Мы можем подключать необходимые компоненты в файле src/assets/sass/style.scss.
Для корректной работы необходимо подключить functions.scss, variables.scss, mixins.scss. Сначала подключаем их в файле src/assets/sass/style.scss:
@import "../../../node_modules/bootstrap/scss/functions"; @import "../../../node_modules/bootstrap/scss/variables"; @import "../../../node_modules/bootstrap/scss/mixins";
Например, нам необходимо подключить компонет сетки:
@import "../../../node_modules/bootstrap/scss/functions"; @import "../../../node_modules/bootstrap/scss/variables"; @import "../../../node_modules/bootstrap/scss/mixins"; @import "../../../node_modules/bootstrap/scss/grid";
Теперь подключим js компоненты BS4. Например, модальные окна. Файл src/assets/js/app.js:
//= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/bootstrap/js/dist/modal.js