13 KiB
title | localeTitle |
---|---|
Learn Some Gulp Basics | Изучите некоторые основы глотки |
Гальп может многое сделать. Это всего лишь общий обзор основ. Как только вы это поймете, вы можете добавить больше к Gulp самостоятельно. Документация для разных пакетов, которые я использовал, была отличной, и у нас также есть отличное сообщество FreeCodeCamp, готовое помочь с любым проектом.
Что такое глоток?
Gulp - это бегун для сборки / задания JavaScript. Вы используете Jade, но нужен HTML? Сасс, но нужен CSS? CoffeeScript, но нужен JavaScript? Или, может быть, вы просто хотите объединить и / или минимизировать то, что у вас уже есть? Gulp может сделать все это для вас легко, поэтому вам не нужно постоянно возвращаться к вашему терминалу после каждого небольшого изменения.
Зачем использовать Gulp?
Мы используем много CodePen на FreeCodeCamp. CodePen позволяет использовать препроцессоры без необходимости делать что-либо еще. Вы можете просмотреть скомпилированную версию, если был использован препроцессор. Это выглядит совсем по-другому. Вы можете сделать проект в React on CodePen, выбрать Babel в качестве препроцессора JavaScript, и все будет работать. Если бы вы делали этот же проект локально, не обрабатывая все, то вы не получили бы то, что ожидали. Здесь появляется Gulp.
Как использовать Gulp?
Опять же, это всего лишь обзор основ. Обзор будет обрабатывать Sass для CSS, конкатенировать и минимизировать таблицы стилей и скриптов и внедрять Gulp watch. Вам нужно, чтобы Node и NPM были установлены на вашем компьютере, прежде чем что-либо делать. Скорее всего, у вас есть это, но введите node -v
и npm -v
в свой терминал, чтобы проверить.
-
Перейдите в каталог проекта и запустите
npm init
в терминале.-
Это создает файл
package.json
в рабочем каталоге. -
Это также было бы хорошим временем для запуска
touch .gitignore
в терминале и добавленияnode_modules/
в файл, поэтому вы не будете нажимать все эти пакеты на GitHub.
-
-
Запустите
npm install --save-dev gulp gulp-concat gulp-minify-css gulp-rename gulp-sass gulp-uglify
в терминале. Это может занять пару минут.-
Это устанавливает 6 различных
node_modules
. Вы можете посмотреть файлpackage.json
и просмотреть все перечисленные ниже вdevDependencies
и в папкеnode_modules
и посмотреть все установленные вами пакеты. -
gulp-concat
для конкатенирования таблиц стилей и скриптов, gulp-minifygulp-minify-css
предназначен для минимизации CSS, gulpgulp-rename
- для переименования файла,gulp-sass
- для Sass для CSS, аgulp-uglify
- для минимизации JS.
-
-
Запустите
touch gulpfile.js
в терминале.- Теперь вы готовы начать.
-
Вам нужно будет потребовать все файлы, которые вы только что сохранили. Вы делаете это в
gulpfile.js
.
'use strict';
var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
-
Нам нужно начать где-то, так что Sass для CSS сначала? Здесь мы собираемся обрабатывать Sass для CSS, минимизировать CSS и переименовывать файл.
-
Имя задачи
sass
(подробнее об этом позже). -
В текущем каталоге мы ищем папку с именем
assets
, затем папку с именемscss
, затем файл с именемmain.scss
. -
Мы обрабатываем Sass для CSS и регистрируем, если возникает ошибка.
-
Затем CSS затем оценивается. Это просто избавляет от лишних линий и пробелов. Компьютер не нуждается в том, чтобы читать файл, и он резко уменьшает размер файла.
-
Поскольку файл теперь минимизирован, имеет смысл переименовать его
.min.css
. -
Последний шаг - сохранить файл
main.min.css
где-нибудь, и он идет в текущем каталоге в папку с именемpublic
, а затем в папкуcss
.
-
gulp.task('sass', function() {
return gulp.src('./assets/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('./public/css'));
});
-
Теперь мы можем получить немного больше в Gulp и попытаться объединить и уменьшить все файлы сценариев. Что делать, если у вас есть только один скрипт, так что вам нечего конкатенации? Может быть, избавиться от некоторых CDN, которые у вас есть, и сделать их сценариями. Но вы получите более крупные проекты с несколькими сценариями.
-
Обратите внимание, что я не рассматриваю исходные карты. Я думаю, что это следующий шаг после этого основного обзора, поэтому посмотрите, как только вы поймете, что вы здесь делаете.
-
Текущие задачи называются
concatScripts
иminifyScripts
. -
Это та же основная структура, что и
sass
. Все файлы добавляются вgulp.src
, но сначала мы должны сохранить этот конкатенированный файл, прежде чем его можно будет минимизировать. -
Минимизация JavaScript называется
uglify
. -
Вы заметили
['concatScripts]
послеminifyScripts
? Это означает, чтоconcatScripts
будут запускаться сначала каждый раз, когда мы пытаемся запуститьminifyScripts
.
-
gulp.task('concatScripts', function() {
return gulp.src([
'./assets/js/script-1.js',
'./assets/js/script-2.js',
'./assets/js/script-3.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./assets/js'));
});
gulp.task('minifyScripts', ['concatScripts'], function() {
return gulp.src('assets/js/app.js')
.pipe(uglify())
.pipe(rename('app.min.js'))
.pipe(gulp.dest('public/app/js'));
});
-
Теперь вы можете перейти в терминал и введите в
gulp sass
и / илиgulp minifyScripts
. Это будет работать каждый, но мы хотим сделать это проще для нас. Мы собираемся создать сборку по умолчанию, поэтому мы можем просто ввестиgulp
в терминал. Мы также собираемся добавитьgulp watch
, поэтому всякий раз, когда вы сохраняете файл, который указан в часах, он будет запускать то, что вы сказали ему запустить.-
Мы сделали задачу под названием
build
. Это очень похоже наminifyScripts
поскольку в нем есть массив. Всякий раз , когда мы вступаемgulp build
в терминал будет работатьsass
иminifyScripts
(который на самом деле работаетconcatScripts
первый). -
Мы также поставили задачу под названием
watch
. Это задача сохранения времени. В терминале вы запускаетеgulp watch
. Gulp останется открытым на терминале, поэтому вы, вероятно, захотите запустить его на другой вкладке. Всякий раз , когда файл обновляется и сохраняется вscss
папке с.scss
расширенияsass
задача будет выполнена. И то же самое для файла в папкеjs
с расширением.js
, но будут выполнятьсяconcatScripts
иminifyScripts
. -
Последняя задача - по
default
. Вы можете просто запуститьgulp
в терминале, и он выполнит задание поdefault
. Задача поdefault
здесь - вызов задачиbuild
, которая просто запускает все задачи, которые у нас есть на странице.
-
gulp.task('build', ['sass', 'minifyScripts']);
gulp.task('watch', function() {
gulp.watch('./assets/scss/**/*.scss', ['sass']);
gulp.watch('./assets/js/**/*.js', ['minifyScripts']);
});
gulp.task('default', ['build']);
Вот как выглядит ваш последний файл gulpfile.js
:
'use strict';
var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('sass', function() {
return gulp.src('./assets/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('./public/css'));
});
gulp.task('concatScripts', function() {
return gulp.src([
'./assets/js/script-1.js',
'./assets/js/script-2.js',
'./assets/js/script-3.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./assets/js'));
});
gulp.task('minifyScripts', ['concatScripts'], function() {
return gulp.src('assets/js/app.js')
.pipe(uglify())
.pipe(rename('app.min.js'))
.pipe(gulp.dest('public/app/js'));
});
gulp.task('build', ['sass', 'minifyScripts']);
gulp.task('watch', function() {
gulp.watch('./assets/scss/**/*.scss', ['sass']);
gulp.watch('./assets/js/**/*.js', ['minifyScripts']);
});
gulp.task('default', ['build']);