Сборка фронтенда

Введение

Node.js (Node)
npm (Node Packed manager).
Менеджер сторонних пакетов. Входит в дистрибутив Node
Полюбить командную строку (консоль)

Инициализация пакета (проекта)

npm init

Пакеты Node.js

Установка пакетов вручную

npm install <имя_пакета>

или

npm i <имя_пакета> - сокращенный вариант

Установка пакетов вручную

Флаги и ключи

-g - флаг устанавки пакета глобально (для вызова из командной строки)
--save - ключ сохранения имени пакета в секцию dependencies файла package.json
--save-dev - ключ сохранения имени пакета в секцию devDependencies файла package.json

Автоматическая установка пакетов

При наличии файла package.json с прописанными пакетами в каталоге проекта. Версия для разработки:

npm install

или

npm i - сокращенный вариант

При этом устанавливаются пакеты прописанные в секциях dependencies и в devDependencies

Автоматическая установка пакетов

Продакшн версия:

npm install --production

или

npm i --production - сокращенный вариант

Пакеты из секции devDependencies установлены не будут

Gulp-пакеты для сборки

Gulp.js (Gulp) - потоковый менеджер задач (task runner) для сборки проектов

Глобальная установка CLI-версии Gulp:

sudo npm install -g gulp

Установка локального менеджера задач

npm install gulp --save-dev

Gulpfile.js

Gulpfile - javascript файл описывающий подключение пакетов, задачи gulp и при необходимости сервисные функции

touch Gulpfile.js

Gulpfile.js

'use strict';

var gulp = require('gulp');

gulp.task('default', function() {
	console.log('default task');
});

Компиляция Less в Css

npm install gulp-less --save-dev

npm install gulp-rename --save-dev

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    less = require('gulp-less');

gulp.task('buildcss', function() {
  return gulp.src('./styles.less')
             .pipe(less())
             .pipe(rename('styles.css'))
             .pipe(gulp.dest('./'));
});

gulp.task('default', ['buildcss']);

Autoprefixer, CSSO

npm install gulp-autoprefixer --save-dev

npm install gulp-csso --save-dev

npm install gulp-load-plugins --save-dev

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')();

gulp.task('buildcss', function() {
	return gulp.src('./styles.less')
	           .pipe(plugins.less())
	           .pipe(plugins.autoprefixer(
	              ['last 3 versions', 'ie 10', 'opera 12']
	            ))
	           .pipe(plugins.csso())
	           .pipe(plugins.rename('styles.min.css'))
	           .pipe(gulp.dest('./app/styles'));
});

gulp.task('default', ['buildcss']);

Шаблоны имён файлов

'*.js' - любое имя файла
'filename.*' - любое расширение
'/*/filename.js' - любой каталог
'/**/*.js' - любой вложенный каталог
'/{foo,bar}/*.js' - каталог foo или bar
'/fonts/*.{ttf,svg,woff}' - файл ttf, svg или woff
['filename.*', '!*.css'] - любое расширение кроме css

Watch. Мониторинг изменений

gulp watch

gulp.task('watch', function() {
	gulp.watch(['*.less'], ['buildcss']);
});

Запуск мониторинга gulp.watch

При изменениях в любом файле с расширением less в текущем каталоге запускается задача buildcss

Обработка ошибок

gulp.task('buildcss', function() {
    return gulp.src('./styles.less')
           .pipe(plugins.less())
           .on('error', function(error) {
             console.log(error);
             this.end();
           })
           .pipe(plugins.autoprefixer(
             ['last 3 versions', 'ie 10', 'opera 12']
           ))
           .pipe(plugins.csso())
           .pipe(plugins.rename('styles.min.css'))
           .pipe(gulp.dest('./app/styles'));
});

Livereload. Автоматическое обновление

npm install connect --save-dev

npm install serve-static --save-dev

npm install connect-livereload --save-dev

npm install gulp-livereload --save-dev

Livereload. Задача server

gulp.task('server', function(next) {
    var server = require('connect')(),
        servestatic = require('serve-static');

    server.use(require('connect-livereload')({
        port: 35729
    }));

    server.use(servestatic('./app', {
        'index': ['index.html', 'index.htm']
    }));

    server.listen(3000, next);
});

Livereload. Задача watch

gulp.task('watch', ['server'], function() {
	var liveserver = plugins.livereload();

	gulp.watch(['*.less'], ['buildcss']);

	gulp.watch([
		'./app/styles/*.css'
	]).on('change', function(file) {
		liveserver.changed(file.path);
	});
});

Jade [jād]. Node Template Engine

doctype html
	html(lang="en")
		head
			title= pageTitle
			script(src='jquery.min.js')
		body
			h1 Jade - node template engine
			#container.col
				if youAreUsingJade
					p You are amazing
				else
					p Get on it!
				p.
					Jade is a terse and simple language with a
					strong focus on performance powerful features.

Jade. Задача компиляции шаблона

npm install gulp-jade --save-dev

gulp.task('template', function() {
    return gulp.src('./index.jade')
               .pipe(plugins.jade())
               .on('error', function(error) {
                 console.log(error);
                 this.end();
               })
               .pipe(gulp.dest('./app'));
});

Jade. Мониторинг и обновление

gulp.task('watch', ['server'], function() {
	var liveserver = plugins.livereload();

	gulp.watch(['*.less'], ['buildcss']);

	gulp.watch(['*.jade'], ['template']);

	gulp.watch([
		'./app/styles/*.css',
		'./app/*.html'
	]).on('change', function(file) {
		liveserver.changed(file.path);
	});
});