![](https://raw.githubusercontent.com/gulpjs/artwork/master/gulp-2x.png)
Огромная благодарность компании JetBrains за поддержку
Расширение LiveReload для браузера
- Google Chrome: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
- Firefox: https://addons.mozilla.org/ru/firefox/addon/livereload-web-extension/
Скачать последний релиз этого проекта
- Релизы: https://github.com/WebProWWW/gulp-web/releases
- Распаковать скаченный архив в директорию вашего нового проекта
public_html/ Корень сайта доступная через браузер.
css/ Скомпилированные файлы Stylus
js/ Скомпилированные файлы CoffeeScript
vue/ Скомпилированные Vue приложении
index.html
src/
coffee/
inc/ Классы, библиотеки, ...
main.coffee Компилируется в public_html/js/main.js
example.coffee Компилируется в public_html/js/example.js
stylus/
lib/ Функции и т.п.
main.styl Компилируется в public_html/css/main.css
example.styl Компилируется в public_html/css/example.css
depends/
vendor/ Библиотеки jQuery, Bootstrap, ...
depends.css Копируется в public_html/css/depends.css
depends.js Копируется в public_html/js/depends.js
any.depends.css Копируется в public_html/css/any.depends.css
any.depends.js Копируется в public_html/js/any.depends.js
vue/ Файлы компилирует webpack (webpack-stream)
App.vue Vue компонент
app.coffee Компилируктся в public_html/vue/app.js
Any.vue Vue компонент
any.coffee Компилируктся в public_html/vue/any.js
gulpfile.js Конфигурация Gulp
.browserslistrc Совместимость с браузерами
Путь
/path-to/my-project
указан только для примера, вы должны указать свой
- Настроить локальный сервер так чтобы публичная директория была
public_html
в вашем проекте - Убедитесь что ваш проект открывается в браузере и корнем сайта является директория
public_html
Пример конфигурации Apache:
<VirtualHost 127.0.0.1:80>
<Directory "/path-to/my-project/*">
Options Indexes FollowSymLinks ExecCGI Includes MultiViews
AllowOverride All
Require all granted
</Directory>
ServerAdmin [email protected]
DocumentRoot "/path-to/my-project/public_html"
ServerName my-project.loc
ErrorLog "/path-to/my-project/error_log"
CustomLog "/path-to/my-project/access_log" common
</VirtualHost>
- Открыть директорию в терминале
cd /path-to/my-project
- Выполните команду
npm install
- После успешной установки зависимостей
- Команда для разработки:
gulp --dev
- Команда для сборки (Vue минифицируется):
gulp
- Команда для разработки:
$ cd /path/to/my-project
$ npm install
...
$ gulp --dev
Команда gulp
с ключом --dev
следит за изменениями файлов (указанные в файле gulpfile.js
) компилирует Stylus, CoffeeScript, Vue компонент и обновляет содержимое браузера.
После запуска открыть проект в браузере и активировать расширение LiveReload для браузера.
$ gulp