Какова цель(и) инструментов сборки JavaScript

В последнее время я изучаю Node.js. За это время я много слышал об использовании Gulp или Grunt в качестве инструмента сборки. Теперь мне интересно узнать, как использовать Gulp. Я слышал, что это инструмент сборки, но я не уверен, что все это охватывает. Что бы я делал (какие задачи) с таким инструментом сборки, как Gulp, который помог бы мне в разработке? Несколько примеров было бы неплохо.


person an earwig    schedule 23.02.2015    source источник


Ответы (3)


Gulp (и Grunt) позволяет автоматизировать задачи.

Почти все, что вы постоянно делаете в проекте, можно автоматизировать с помощью gulp и его плагинов, и если вы не можете найти плагин, который сделает эту работу за вас, gulp — это просто приложение Node.js, так что вы можете быстро написать свой собственный код, чтобы сделать работу.

Что касается примеров, так как я сам являюсь веб-разработчиком Angular. Я приведу вам примеры из области Front End Development, но не думайте, что gulp ограничивается только этой областью. Вот некоторые примеры :

  • Automate your build process (some subtask examples here)
    • Take all your projects HTML, JavaScript, CSS, concatenate them and minify them
    • Автоматически внедряйте зависимости в ваши файлы HTML
  • Listen to file changes and run tasks when a file changes
    • Every time you add a JavaScript file, you need to add include it to your HTML files. this can be automated
    • Каждый раз, когда вы сохраняете файл JavaScript, вы хотите запустить для него jshint, чтобы предупредить об ошибках.
    • Каждый раз, когда вы сохраняете файл CoffeeScript, вы хотите, чтобы он автоматически преобразовывался в файл JavaScript и включал этот файл javascript в ваши HTML-файлы.
  • Автоматическое удаление файлов
  • Тысячи других вещей

Еще одно интересное преимущество, которое вы получаете с инструментами сборки JavaScript (в отличие от Ant для Java или Rake для Rails), заключается в том, что большинство всех веб-приложений там используют JavaScript, поэтому, если ваша внутренняя часть написана на Java, Rails или C++, ваши сотрудники переднего плана всегда радуются. под JavaScript. Это означает, что независимо от того, какой язык вы используете, вы все равно используете JavaScript, что делает такие инструменты, как gulp, очень интересными, поскольку опыт работы с JavaScript и JavaScript гарантированно присутствует в любой команде веб-разработчиков.

Думаю, я обновлю это вовремя, чтобы сделать его более ясным. А пока посмотрите: http://gulpjs.com/plugins/, чтобы получить представление о некоторых легкодоступной функциональности, которую вы можете получить с помощью gulp.

Вот краткий пример кода задачи gulp, которая берет изображения вашего проекта и перемещает их в папку dist:

gulp.task('images', ['clean'], function () {
  return gulp.src('/src/assets/images/**/*')
    .pipe(gulp.dest('dist/assets/images/'));
});

Задачи могут быть объединены в цепочку и полагаться друг на друга. Обратите внимание, как задача «images» зависит от «clean». Это означает, что если вы хотите запустить «изображения», ваша «чистая» задача будет автоматически вызвана раньше. Это позволяет вам объединять задачи вместе для очень мощных последовательностей задач многократного использования. Вот пример того, как может выглядеть «чистый»:

gulp.task('clean', function (done) {
  del(['/dist'], done);
});

Вот случайная страница, которую я нашел с помощью поиска Google. Он содержит очень понятный файл CoffeeScript с примерами задач автоматизации gulp во внешнем проекте: http://pem-musing.blogspot.ca/2014/02/a-gulp-of-coffee-your.-gulpfile-in.html.

person Cosmin    schedule 24.02.2015
comment
Итак, будет ли npm install идеальной задачей для запуска через gulp? - person an earwig; 25.02.2015
comment
Я не понимаю, почему это может быть проблемой, но не верьте мне на слово... Почему вы думаете, что это может быть проблемой? И зачем вам npm install в задаче? - person Cosmin; 25.02.2015
comment
Спасибо, @Cosmin, за объяснение концепции простым английским языком. Ценится. :) - person Ankit Prajapati; 27.04.2018

Gulp JS — это инструмент на основе Javascript, который позволяет автоматизировать задачи вашего рабочего процесса. Автоматизация может буквально увеличить ваше производство. Независимо от того, являетесь ли вы разработчиком или дизайнером, который время от времени создает каркасы HTML, мы рекомендуем углубиться в это.

http://www.jshive.com/getting-started-gulp-task-runner/

person Bharathi Devarasu    schedule 30.08.2016

Инструменты сборки являются активом для разработки приложений. Несколько лет назад менеджеры проектов обычно бегали за разработчиками, прося их очистить код, проанализировать код, повысить производительность приложения и т. д.

Обычный образ действий разработчиков заключался в том, чтобы сделать копию кода среды «Разработка» для среды Производство и выполнить необходимые операции. Разработчики будут использовать стороннее программное обеспечение или приложения, которые помогают очищать код, например, удалять ненужные комментарии, минимизировать общий размер файла и, следовательно, приложения, объединять файлы, чтобы уменьшить количество обращений к серверу, выполнить юнит-тесты, и это лишь некоторые из них.

Что сделали системы сборки, такие как Gulp и Grunt, так это то, что они автоматизируют все вышеупомянутые задачи за несколько секунд. Эти системы сборки имеют специальные плагины, которые выполняют конкатенацию, минимизацию, линтинг, разработку для конкретной среды и т. д. Все эти задачи выполняются за один раз, выполняя необходимые операции, в свою очередь запуская приложение из вновь сформированного производственного кода.

Преимущество использования системы сборки заключается в том, что она в большей степени ускоряет время загрузки страницы вашего приложения. Ваш код чище, меньше по размеру и в то же время соответствует лучшим практикам кодирования. И, в свою очередь, вы экономите много времени, затраченного на выполнение каждой из этих задач.

С ними довольно легко работать, и их следует использовать при разработке приложений. :-)

person Clinton Roy    schedule 08.09.2017