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.
Дякую за увагу!
- Кращі читалки для linux
- Що таке postcss.
- Як зробити привабливий чекліст з перегортанням свайпамі.
- Nodejs. Як працювати з файлом package.json.
- Nodejs. Що таке middleware і статичні файли.
- Nodejs. Як зібрати шаблон з декількох частин.
- Nodejs. Як створити "список справ". Частина 2.
- Обговорюється закриття проекту apache openoffice
- Вакансії в команді сайту
- Rsync приклади синхронізації
- Вивчаємо sass. Встановлення та налаштування.
- Створення движка на mvc. Починаємо робити чат.
- Nodejs. Модулі.
- Установка і настройка postcss.
- Gulp. Спостереження за змінами в файлах.
- Створення движка на mvc. Пишемо роутер.
- Соціальна мережа на php: підготовка проекту.
- Gulp. Вступ.
- Структура і призначення файлів і папок в андроїд
- Створення движка на mvc. Починаємо роботу з базою даних.
- Gulp. Встановлення та налаштування.