Всем привет! Мы продолжаем нашу серию статей, посвященную изучению Gulp , и сегодня создадим структуру нашего проекта, а также рассмотрим, как работают задачи в Gulp .
Всем привет! Мы продолжаем нашу серию статей, посвященную изучению Gulp, и сегодня создадим структуру нашего проекта, а также рассмотрим, как работают задачи в Gulp.
Все проекты имеют примерно похожую структуру. Давайте тоже организуем наши папки.
Для этого нам нужно в папке firstProject создать папки с именами app и dist. В app у нас будут исходники нашего проекта, а в dist(от слова distribution) уже готовый проект.
Структура папки app:
- 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 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 с таким содержанием:
body
background-color: #777
Если вы теперь выполните команду:
gulp sass
То в папке app/css создастся файл main.css со скомпилированным css кодом.
Поскольку мы не писали какое-то конкретное название файла, а написали *, то при выполнении плагина будут выбираться и компилироваться все файлы, имеющие расширение sass.
Итак, а на сегодня это все. Мы создали структуру нашего проекта, а также рассмотрели, как работают задачи в Gulp.
Спасибо за внимание!
