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

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

Ответы

Ответ 1

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

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

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

  • автоматизировать процесс сборки (некоторые примеры подзадач здесь)
    • возьмите все ваши проекты html, js, css, объедините их и уменьшите их
    • автоматически вставляет зависимости в ваши html файлы.
  • слушать изменения файлов и запускать задачи при изменении файла
    • Каждый раз, когда вы добавляете js файл, вам нужно добавить его в ваши html файлы. это может быть автоматизировано.
    • каждый раз, когда вы сохраняете файл JavaScript, который хотите запустить jshint на нем, чтобы предупреждать об ошибках
    • каждый раз, когда вы сохраняете файл CoffeeScript, вы хотите, чтобы он был автоматически преобразован в файл javascript, и этот файл javascript был включен в ваши html файлы.
  • удаление файлов автоматически
  • тысячи других вещей

Еще одно интересное преимущество, которое вы получаете с помощью инструментов сборки JavaScript (в отличие от Java Ant или Rails Rake), заключается в том, что большинство веб-приложений там используют JavaScript. Так что, если ваш задний конец находится в Java или Rails или С++... ваши люди в конце концов всегда радуются под JavaScript. Это означает, что независимо от того, какой язык вы используете, вы STILL используете 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/'));
});

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

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

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

Надеюсь, что это поможет

Ответ 2

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

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

Ответ 3

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

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

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

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

Они довольно просты в работе и должны использоваться в разработке приложений.:-)