Начинаем создавать систему сборки.
Требования: На компьютере должны стоять: * nodeJS * Git
Последовательность работы
-
Инициализируем Git
$ git init
-
Инициализируем проект
$ npm init
Проверяем, что в директории появился файлик
package.json
-
Мы хотим создать локальный сервер для разработки
Для этого нам понадобится browsersync
Установим его:
$ npm i -D browser-sync
У нас обновился файлик
package.json
тут появилась первая зависимость.У нас появилась папочка
node_modules
Но она нам в git-е не нужна. Мы легко получим ее копию выполнив комманду
$ npm i
Поэтому создаем файлик
.gitignore
-
Для того, что бы протестировать файлик создадим какой-то
index.html
-
Запустим локальный сервер
$ npx browser-sync start --server --tunnel --watch
-
Научимся делать тоже самое через опции
$ npx browser-sync init
У нас появился файлик
bs-config.js
Давайте немного его поправим
"watch": true, "server": 'public', "port": 9000
Перенесем файлик
index.html
в директориюpublic
и запустим сервер$ npx browser-sync start --config bs-config.js
Для удобства сохраним комманду в
package.json/scripts
-
Выполним тоже самое, с помощью
gulp
$ npm i -D gulp
создаем
gulpfile.js
"use strict" const gulp = require('gulp'), fs = require('fs'), browserSync = require('browser-sync').create(), browserSyncOptions = require('./bs-config.js'); gulp.task('server', function() { browserSync.init(browserSyncOptions); });
Проверяем
$ npx gulp server
-
Добавим
proxy
$ npm i -D proxy-middleware url
const proxy = require('proxy-middleware'); browserSyncOptions.server.middleware.push(proxy(weatherProxyOptions));
-
Добавим
pug
$ npm i -D gulp-pug
const pug = require('gulp-pug'); gulp.task('pug', function() { return gulp.src('src/pages/*.pug') .pipe(pug({ pretty: true })) .pipe(gulp.dest('build')); });
-
Альтернативное подключение плагинов
gulp-load-plugins
$ npm i -D gulp-load-plugins
const gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins(); // pug === plugins.pug
-
Подключим сборщик стилей
$ npm i -D node-sass gulp-sass
-
Обьединяем файлы в один
$ npm i -D gulp-concat
-
Другой способ обьединения файлов @import... Но есть особенности
/* All is equal! */ @import "index" @import "_index" @import "index.scss" @import "_index.scss"
-
Возможны любые дополнительные задачи. Например, оптимизация CSS файла или аутопрефиксер
$ npm i -D gulp-csso gulp-autoprefixer gulp-rename
-
Научимся удалять файлы с помощью задач
$ npm i -D del
-
Запускаем вместе сервер и слежку за файлами
-
Обсуждаем возможности реакции на изображения
$ npm i -D gulp-srcset imagemin imagemin-zopfli imagemin-svgo imagemin-webp imagemin-mozjpeg
Дополнительная информация:
- 11 простых npm трюков
- Specifics of npm's package.json handling
- Browsersync Documentation
- gulp
- gulp PUG
- PUG API docs
- html to pug online converter
- pug to html online converter
- gulp SASS
- gulp LESS
- gulp Stylus
- css to sass online converter
- SCSS @import, @mixin, @extend
- Gulp srcset
- Gulp Responsive
- Auto srcset
- Building a simple responsive images pipeline with Gulp