NPM установить Gulp--save-dev
Что такое Gulp?
Gulp-это новое поколение инструментов строительства проектов. Вы можете использовать Gulp и его плагины для составления кода проекта (меньше, SASS), а также может сжать ваш код JS и CSS и даже сжать ваши изображения. Gulp имеет только небольшое количество API, поэтому его очень легко выучить. Gulp использует Stream для обработки контента. Узел породил ряд инструментов автоматизации, таких как Bower, Yeoman, Grunt и т. Д.
Сходства и различия между Gulp и Grunt
Легкий в использовании: Использование стратегий кода через стратегии конфигурации, Gulp сохраняет простые вещи простые и сложные задачи управляемыми.
Эффективно: используя мощный поток node.js, вы можете заполнить конструкцию быстрее, не записывая промежуточные файлы на диск.
Высокое качество: строгие рекомендации Gulp's Strict, чтобы гарантировать, что плагины являются простыми и работали так, как вы ожидаете.
Легко учиться: минимизируя API, вы можете научиться глотать за очень короткое время. Работа для сборки такая же, как вы себе представляли: это серия проточных трубопроводов.
Поскольку Gulp записано в node.js, вам нужно установить NPM на свой терминал. NPM - это диспетчер пакетов Node.js, поэтому сначала установите node.js на вашем компьютере.
Команда установки Gulp
SUDO NPM Установка -g Gulp
Создайте новый файл package.json в корневом каталоге
NPM Init.
Установите пакет Gulp
После установки введите снова, чтобы просмотреть номер версии, как показано на следующем рисунке, он успешно:
Установите плагины
Установите обычно используемые плагины:
Компиляция SASS (Gulp-Ruby-Sass)
Автоматически добавить префикс CSS (Gulp-Autoprefixer)
Сжатый CSS (Gulp-Minify-CSS)
Проверка кода JS (Gulp-jshint)
Merge JS файлы (Gulp-Concat)
Сжатый код JS (gulp-uglify)
Сжатое изображение (Gulp-Imagemin)
Автоматически обновить страницу (Gulp-Livereload)
Кэш изображения, только в том случае, если изображение заменяется (gulp-cache)
Изменить напоминание (gulp-notify)
Очистить файл (del)
Чтобы установить эти плагины, вам нужно запустить следующую команду:
Кода -копия выглядит следующим образом:
$ npm установить gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del-save-dev-dev
-save и -save -dev могут сохранить вам шаги, чтобы вручную изменить файл package.json.
npm установить модуль -имени -сейв
Автоматическое добавление модулей и номеров версий в раздел зависимости
NPM установить модуль-name -save-dev
Автоматически добавлять номера модулей и версий в раздел DevDependences
командование Gulp
Вам нужно знать только 5 команд Gulp
Gulp.task (name [, Deps], Fn) определить имя задачи: имя задачи DEPS: Имя задачи зависимости FN: Функция обратного вызова
Gulp.run (задачи ...): запустите несколько задач параллельно как можно больше
Gulp.Watch (Glob, FN): при изменении контента глобуса, выполните FN
Gulp.src (глобус): установите путь к обработке файла, который может быть несколькими файлами в форме массива, или он может быть регулярно
Gulp.dest (Path [, Options]): установите путь, чтобы сгенерировать файл
Glob: может быть прямым путем файла. Его значение сопоставлено с шаблонами.
Файлы, которые будут обрабатываются с помощью Gulp Guides, связанных с плагинами через API Pipe ()). Выполните задачи обработки файлов через плагины.
Gulp.task ('default', function () {...});API Gulp.task используется для создания задач. Вы можете ввести $ gulp [по умолчанию] в командную строку (необязательно для скобков) для выполнения вышеуказанных задач.
Официальная документация API Gulp: https://github.com/gulpjs/gulp/blob/master/docs/api.md
Коллекция плагина Gulp: http://gulpjs.com/plugins/
Начните строить проект
Создайте новый файл Gulpfile.js в каталоге Project Root и вставьте следующий код:
// Внедрить плагины Gulp и Uglify в справочник корневого проекта var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); gulp.task ('compress', function () {return gulp.src ('script/*. Js') .pipe (uglify ())Примечание. Имя файла Gulpfile.js не может быть изменено.
Проект должен использовать UGLIFY и переименовать плагины и выполнить следующую команду для установки:
Установка NPM-Save-Dev Gulp-uglifynpm Установка-Save-Dev Gulp-rename
Возьмите мой пример, введите каталог, где находится Gulpfile.js:
CD/пользователи/trigkit4/gulp-test
Затем введите:
var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename'); gulp.task ('compress', function () {return gulp.src ('script/*. js') .pipe (uglify () .pipe ('jquery. .pipe (Gulp.dest ('dist'));});Эта команда установит все зависимости в Package.json, как показано на следующем рисунке:
Полный Gulpfile.js
// Load plug-in var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require ('gulp-imagemin'), rename = require ('gulp-rename'), clean = require ('gulp-clean'), concat = require ('gulp-concat'), уведомление = require ('gulp-notify'), cache = require ('gulp-cache'), livereload = require ('gulp-livereload'); // style gulp.task ('styles', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'exted',})) .pipe (Autoprefixer ('Last 2 версия', 'Safari 5', 'IE 8', IE 9 ',', IOR ', IOR', IOR ', IOR', IOR ', IOR', IOR ', IOR', IOR ', IOR'. 4 ')) .pipe (glp.dest (' dist/styles ')) .pipe (rename ({суффикс:' .min '})) .pipe (minifycss ()) .pipe (gulp.dest (' dist/styles ')) .pipe (уведомление ({message:' styles words words '});}); // script gulp.task ('scripts', function () {return gulp.src ('src/scripts/**/*. Js') .pipe (jshint ('. Js')) .pipe (jshint ('. Js')) .pipe (jshintrc ') .pipe (jshint (js')) .pipe (jshintrc ').). .pipe (concat ('main.js')) .pipe (glp.dest ('dist/scripts')) .pipe (rename ({суффикс: '.min'})) .pipe (uglify ()) .pipe (gulp.dest ('dist/scripts')) .pipe (utify ({message: 'scripts udew // Изображение Gulp.task ('Images', function () {return gulp.src ('src/images/**/*') .pipe (cache (imagemin ({optimizationlevel: 3, progressive: true, interledsed: true})))) .pipe (gulp.dest ('dist/image') .pipe (not weplect ({{{{{{{{{{{{{);); // чистый gulp.task ('clean', function () {return gulp.src (['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) .pipe (clean ());}); // PRESET TASSE GULP.TASK ('по умолчанию', ['clean'], function () {gulp.start ('styles', 'scripts', 'images');}); // Guard Gulp.task ('watch', function () {// guard all .scss files files gulp.watch ('src/styles/**/*. Scss', ['styles']); // охранять все файлы .js gulp.watch ('src/scripts/**/*. Js', ['scripts']; Gulp.Watch ('SRC/Scripts/**/*. JS', ['Scripts']); Gulp.watch (['dist/**']). });ПРИМЕЧАНИЕ. Pipe () - это метод передачи потоков данных в потоковом модуле. Первый параметр-это метод плагина. Плагин будет получать файлы, вытекающие из восходящего процесса, а затем текут вниз.
Gulp.task ('name' name ', function () {return gulp.src (' file path ') .pipe (...) .pipe (...) // до последнего этапа задачи.pipe (...);});плагин Gulp
Страги Gulp-GH: используйте Gulp, чтобы генерировать HTML-документы путем Markdown и загрузить их на GIT Pages
https://github.com/shinnn/gulp-gh-pages
var gulp = require ('gulp'); var ghpages = require ('gulp-gh-pages'); gulp.task ('deploy', function () {return gulp.src ('./ dist/**/*') .pipe (ghpages ());});Плагин Gulp-Jade: компилировать Джейд в html-файл
плагин без глотка: компилировать меньше в файл css
var mess = require ('ulp без'); var path = require ('path'); Gulp.task ('mess', function () {return gulp.src ('./ mess/**/*. Mess') .pipe (ness ({paths: [path.join (__ dirname, 'mess', 'включает')]}). требуется ('Gulp'); var gls = require ('gulp-live-server'); Gulp.task ('ord', function () {// 1. Служить с настройками по умолчанию var server = gls.static (); // равняется gls.static ('public', 3000); server.start (); // 2. служить на пользовательском порте var server = gls.static ('dist', 8888); Server.Start (); / /3. var -var -var var vars '' vars '' vars 'vars' var. 'gl. '.tmp']);Gulp-Livereload может сэкономить и обновлять в режиме реального времени, поэтому нет необходимости нажимать F5 и переключать интерфейс
Gulp-Load-Plugins: автоматически загружать произвольный плагин Gulp в свой файл package.json
$ npm install-save-dev gulp-load-plugins
Например, файл данного пакета.
{"Зависимости": {"Gulp-Jshint": "*", "Gulp-Concat": "*"}}Добавьте следующий код в Gulpfile.js:
var gulp = require ('gulp'); var gulploadplugins = require ('gulp-load-plugins'); var plugins = gulploadplugins (); plugins.jshint = require ('gulp-jshint'); plugins.concat = require ('gulp-concat');Gulp-Babel: плагин Gulp's Babel,
$ NPM Установка-Save-Dev Gulp-Babel Babel-Preset-ES2015
Как использовать:
const gulp = require ('gulp'); const babel = require ('gulp-babel'); glp.task ('default', () => {return gulp.src ('src/app.js') .pipe (babel ({us2015 ']}).).Официальный GitHub: https://github.com/gulpjs/gulp