Заметки на лету

frontend

Установка Gulp:

  1. Устанавливаем Node.js (если не установлено)
  2. Устанавливаем gulp npm install gulp -g (один раз - глобально) ??? нужно??
  3. Открываем папку с проектом в консоле
  4. npm init - создает файл package.json, который содержит информацию о проекте (описание проекта и зависимости).
  5. npm install gulp --save-dev - устанавливаем gulp в папку с проектом

Примечание: npm install gulp --save-dev === npm i gulp -D (алисы не везде работают)
6. Перечень необходимых пакетов:
* npm i browserify -D - позволяет вам использовать стиль node.js модулей для работы в браузере. Мы определяем зависимости и потом Browserify собирает их в один маленький и чистенький JavaScript файл.
* npm i vinyl-source-stream -D - виртуальная файловая система для чтения/записи файлов. Получаем выходные данные Browserify и сохранить их в файл с помощью Gulp.
* npm i rimraf -D - полностью очищает каталог
* npm i stringify -D - позволяет подключать статические файлы, например шаблоны.
* npm i gulp-sftp -D - закачиваем изменения по ssh
Примечание: При установки все скаченые модули располагаются в папке node_modules, зависимости прописываются в файл package.json. Если папка node_modules удалена, но в package.json прописаны зависимости, установить все пакеты можно командой npm install.
7. Создаем в корне проекта файл gulpfile.js Ниже показано содержимое файла.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// импорт npm модулей в проект
var gulp = require('gulp'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    rimraf = require('rimraf'),
    stringify = require('stringify');

var sourceFile = './src/main.js',    // местоположение главного нашего js файла, точки входа
    destFolder = './dist',           // местоположение финального файла
    destFile = 'bundle.js';          // имя, которое мы хотим дать нашему финальному файлу

// Сбор проекта в один файл
gulp.task('build', function() { // [0]
   return browserify(sourceFile) // [1]
       .transform(stringify({extensions: ['.tpl'], minify: true})) // [2]
       .bundle() // [3]
       .pipe(source(destFile)) // [4]
       .pipe(gulp.dest(destFolder)); // [5]
});

[0] данная функция вызывается в консоле так: gulp build. В формальных параметрах могут также указываться функции, которые необходимо выполнить до начала работы данной функции, например gulp.task('build', ['copy-static'], function() { вызываем сначала функцию copy-static.

[1] главное тут в Browserify, ему передаем точку входа в наше приложение

[2] transform - метод Node, с которым можно работать благодаря browserify. Преобразует поток нужным образом.
stringify - позволяет подключать статические файлы, например шаблоны.
extensions: [‘.html’, ‘.tpl’, ‘.hbs’] - указываем форматы каких статических файлов можно подключать и позволяет складывать их в переменную
minify - минимизирует файлы
Пимечание: если в gulpfile.js не указать stringify, то в файлах проекта нельзя будет подключать шаблоны: var AppTpl = require('./../templates/App.tpl');

[3] используем потоковый Browserify API для того, чтобы вернуть поток с нашим JS контентом

[4] [5] перекидываем информацию из потока в файл и сохраняем его в директорию.

Примечание: Функции require, pipe и transform относятся к Node:

1) require - метод для импорта модулей, JSON-файлов, папок и т.д.
2) pipe - принимает поток, который используется для передачи читаемого потока в записываемый.
3) transform - метод Node, с которым можно работать благодаря browserify. Преобразует поток нужным образом.

args = require(‘yargs’).argv;

gulp.task(‘test’, function () {

var env      = args.env || 'prod'; // команда в консоле: gulp test --env df (выводит df)
console.log(env);

});











https://loftblog.ru/material/gulp-js-rabotaem-s-css-concat-minify-rename-notify-watch-dest/
https://www.8host.com/blog/nachalo-raboty-s-gulp-js/
http://www.creative-seo.ru/blog/gulp-dlya-nachinayushchih/
http://pugofka.com/blog/technology/the-prepared-starting-package-front-end-development-on-gulp/
http://getinstance.info/articles/tools/introduction-to-gulp/
https://habrahabr.ru/post/224825/ !!!!!

http://www.creative-seo.ru/blog/gulp-dlya-nachinayushchih/

Поделиться