Gulp. Структура проекту і робота завдань.

Gulp. Структура проекту і робота завдань.

Всім привіт! Ми продовжуємо нашу серію статей, присвячену вивченню Gulp, і сьогодні створимо структуру нашого проекту, а також розглянемо, як працюють завдання в Gulp.

Всі проекти мають приблизно схожу структуру. Давайте теж організуємо наші папки.

Для цього нам потрібно в папці firstProject створити папки з іменами app і dist. В app у нас будуть вихідні нашого проекту, а в dist(Від слова distribution) Вже готовий проект.

структура папки app:

Відео: Gulp.js # 05 - структура проекту, wiredep, bower

  • css
  • fonts
  • img
  • js
  • sass
  • index.html

Тепер створимо файл gulpfile.js в кореневій папці проекту. У ньому пропишемо наступне:

Відео: Збирачі фронтенд проектів. Для чого це потрібно, і чому я цим не користуюся

var gulp =require(`Gulp`) -// підключаємо gulp

gulp
.task(`Mytask`,function(){
return gulp.src(`Source-files`)
.pipe(plugin())
.pipe(gulp.dest(`Folder`))
}) -

task () - це завдання, які буде виконувати gulp.




src () - команда, що дозволяє вибрати потрібні файли з вказаних.

pipe () - дозволяє виконати який-небудь плагін.

dest () - вивантажує роботу плагінів, підключених через pipe ().

Це базові команди Gulp. Тобто порядок виконання такої: спочатку ми беремо якийсь файл, потім щось виконуємо над цим файлом, а потім виводимо кудись результат.

Відео: Структура проекту GULP




Щоб запустити задачу, в консолі пропишіть наступне:

gulp mytask

Тепер давайте розглянемо роботу задач на реальному прикладі. встановимо Sass:

npm i gulp-sass --save-dev

підключимо Sass у файлі gulpfile.js, а також створимо задачу, яка буде автоматично виконувати попередню обробку sass файлів.

var sass =require(`Gulp-sass`) -

gulp
.task(`Sass`,function(){
return gulp.src(`App / sass / *. Sass`)
.pipe(sass())
.pipe(gulp.dest(`App / css`)) -
}) -

Тепер створимо в app / sass файл main.sass з таким змістом:

Відео: Gulp.js # 1 - працюємо з CSS: concat, minify, rename, notify, watch, dest

body
background
-color:# 777

Якщо ви тепер виконайте команду:

gulp sass

То в папці app / css створиться файл main.css зі скомпільований css кодом.

Оскільки ми не писали якийсь конкретну назву файлу, а написали *, то при виконанні плагіна будуть вибиратися і компілюватиметься всі файли, що мають розширення sass.

Отже, а на сьогодні це все. Ми створили структуру нашого проекту, а також розглянули, як працюють завдання в Gulp.

Дякую за увагу!

Поділися в соціальних мережах:

Схожі
Gulp. Спостереження за змінами в файлах.Gulp. Спостереження за змінами в файлах.
Gulp. Вступ.Gulp. Вступ.
Соціальна мережа на php: підготовка проекту.Соціальна мережа на php: підготовка проекту.
Створення движка на mvc. Допрацьовуємо роутер.Створення движка на mvc. Допрацьовуємо роутер.
Вивчаємо sass. Встановлення та налаштування.Вивчаємо sass. Встановлення та налаштування.
Nodejs. Модулі.Nodejs. Модулі.
Обговорюється закриття проекту apache openofficeОбговорюється закриття проекту apache openoffice
Створення движка на mvc. Починаємо роботу з базою даних.Створення движка на mvc. Починаємо роботу з базою даних.
Що таке postcss.Що таке postcss.
Установка і настройка postcss.Установка і настройка postcss.
» » Gulp. Структура проекту і робота завдань.