gulp учебник
Начало работы с глотком
Поиск…
замечания
Gulp - это система сборки JavaScript, работающая на узле.js, как Grunt. Он позволяет автоматизировать общие задачи в процессе разработки. Gulp использует потоки -concept и code-over-configuration для более простого и интуитивно понятного процесса сборки. Концепция сквозной конфигурации позволяет создавать более читаемые и простые задачи, в то время как задачи grunt сильно перенастраиваются.
Версии
Версия | Дата выхода |
---|---|
3,4 | 2014-01-17 |
3,7 | 2014-06-01 |
3,8 | 2014-06-10 |
3,9 | 2015-06-02 |
3.9.1 | 2016-02-09 |
4.0.0 | 2016-06-21 |
Установка или настройка
1. Установите Node.js и NPM:
Для Gulp требуются Node.js и NPM, менеджер пакетов Node. Большинство инсталляторов включают NPM с Node.js. Обратитесь к документации по установке или подтвердите, что она уже установлена, выполнив следующую команду в вашем терминале,
npm -v
// will return NPM version or error saying command not found
2. Установите глоток во всем мире:
Если вы ранее устанавливали версию глотки во всем мире, запустите npm rm --global gulp
чтобы убедиться, что ваша старая версия не сталкивается с gulp-cli .
$ npm install --global gulp-cli
3. Инициализируйте каталог проекта:
$ npm init
4. Установите gulp в свой проект devDependencies:
$ npm install --save-dev gulp
5. Создайте gulpfile.js в корне вашего проекта:
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
6. Запустите глоток:
$ gulp
Запуск по умолчанию будет выполняться и ничего не делать.
Для запуска отдельных задач используйте gulp <task> <othertask>
.
Зависимость задачи
Вы можете запускать задачи последовательно, передавая второй параметр gulp.task()
.
Эти параметры представляют собой набор задач, которые должны выполняться и выполняться до запуска вашей задачи:
var gulp = require('gulp');
gulp.task('one', function() {
// compile sass css
});
gulp.task('two', function() {
// compile coffeescript
});
// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
// concat css and js
});
// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
// save bundle to dist folder
});
Вы также можете опустить эту функцию, если хотите только запустить набор задач зависимостей:
gulp.task('build', ['array', 'of', 'task', 'names']);
Примечание . Задачи будут выполняться параллельно (все сразу), поэтому не допускайте, чтобы задачи запускались / заканчивались по порядку. Запуск gulp.series()
v4 , gulp.series()
следует использовать, если порядок выполнения задач зависимостей важен.
Файл Concat js в подпапке с помощью gulp
var gulp = require('gulp');
// include plug-ins
var uglify = require('gulp-uglify'),
concat = require('gulp-concat');
// Minified file
gulp.task('packjsMin', function() {
return gulp.src('node_modules/angular/*.js')
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(gulp.dest('Scripts'));
});
//Not minified file
gulp.task('packjs', function () {
return gulp.src('node_modules/angular/*.js')
.pipe(concat('allPackages.js'))
.pipe(gulp.dest('Scripts'));
});
gulp CLI docs
Флаги
gulp имеет очень мало флагов, о которых нужно знать. Все остальные флаги предназначены для использования в случае необходимости.
-
-v
или--version
отображает глобальные и локальные версии глотки -
--require <module path>
потребуется модуль перед запуском gulpfile. Это полезно для транспилеров, но также имеет другие приложения. Вы можете использовать несколько флагов--require
-
--gulpfile <gulpfile path>
будет вручную задан путь к gulpfile. Полезно, если у вас есть несколько gulpfiles. Это также установит CWD в каталог gulpfile -
--cwd <dir path>
будет вручную установить CWD. Поиск gulpfile, а также относительности всех требует отсюда -
-T
или--tasks
отобразит дерево зависимостей задачи для загруженного gulpfile -
--tasks-simple
отобразит список задач для загруженного gulpfile -
--color
заставит плагины gulp и gulp отображать цвета, даже если цветовая поддержка не обнаружена -
--no-color
заставит плагины глотков и глотков не отображать цвета даже при обнаружении поддержки цвета -
--silent
отключит все протоколы--silent
CLI добавляет process.env.INIT_CWD, который является оригинальным cwd, с которого он был запущен.
Специальные флаги задач
Обратитесь к этой статье StackOverflow о том, как добавить определенные пользователем флаги
Задачи
Задания можно выполнить, выполнив gulp <task> <othertask>
. Просто запуск gulp
выполнит задание, которое вы зарегистрировали, по default
. Если нет заданий по default
gulp будет ошибкой.
Составители
Вы можете найти список поддерживаемых языков при интерпретации . Если вы хотите добавить поддержку нового языка, отправьте запрос на отправку / открытые проблемы.