Grunt Livereload на локальном хосте запущен с WAMP/XAMPP/UniServerZ

Я пытаюсь поднять свой интерфейсный рабочий процесс на шаг выше с помощью задач Grunt.

Я настроил пару задач в своем Gruntfile.js. На данный момент есть только grunt-contrib-sass и grunt-contrib-watch, так что файлы .css автоматически перекомпилируются всякий раз, когда я вношу изменения в свои файлы .sass.

Я хочу добиться следующего:

Я хочу добавить задачу, которая прослушивала бы мой локальный сервер, запущенный с помощью UniServerZ/XAMPP/WAMP или любого другого провайдера. Я хочу запускать перезагрузку каждый раз, когда я редактирую любой файл в базовом каталоге сервера.

Я знаю, что такую ​​задачу довольно легко настроить, например. 'grunt-express', который запускает для вас локальный сервер, но я действительно хочу послушать сервер, запущенный с помощью UniServerZ/XAMPP/WAMP.

Буду признателен за пример конфигурации для такого сценария, если это возможно.


localhost gruntjs grunt-contrib-watch
person luqo33    schedule 01.12.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вот как я это сделал с Wamp 2.2 в Windows 7.

Во-первых, вам нужно правильно настроить grunt-contrib-watch с livereload. Я также использую grunt-sass, а не grunt-contrib-sass, потому что grunt-sass использует Либсасс. LibSass — это порт C/C++ движка Sass, и он быстрее.

Для их установки используйте следующие команды:

npm install grunt-contrib-watch --save-dev
npm install grunt-sass --save-dev

Вот пример Gruntfile:

module.exports = function(grunt) {

    grunt.initConfig({
        watch: {
            sass: {
                files: 'folder/to/your/sass/**/*.sass',
                tasks: ['sass:dist'],
                options: {
                    livereload: true,
                },
            },
            //Watch your theme files
            livereload: {
                files: ['pathToTheme/*.php', 'pathToTheme/img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
                options: {
                    livereload: true
                },
            }
        },
        sass: {
            options: {
                includePaths: ['where/to/find/additional/@import/scss/files'],
                outputStyle: 'nested',
                imagePath: 'how/to/rewrite/image/path',
                sourceMap: true
            },
            dist: {
                files: {
                    'output/file.css': 'input/file.scss'
                }
            }
        },
    });

    // Default task
    grunt.registerTask('default', ['watch']);

    // Load NpmTask
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

};

Вы можете сэкономить время с помощью load-grunt-tasks и удалить ручную загрузку задача :

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

Затем я использую Плагин livereload для Firefox (или Chrome, или Safari).

Запустите задачу grunt watch, откройте свой сайт на локальном хосте и щелкните значок в браузере. Теперь, если вы отредактируете просматриваемый файл, страница должна обновиться соответствующим образом.

Существует решение для автоматического добавления livereload js в ваш Wordpress (в function.php):

if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
    wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
    wp_enqueue_script('livereload');
}
person Lionel    schedule 13.02.2015
comment
Разве вам не нужно вносить какие-либо изменения в конфигурацию вашей задачи grunt, чтобы она знала, где обновить страницу? - person Vishwanath; 13.02.2015
comment
Я отредактировал свой ответ, добавив пример Gruntfile. Надеюсь, это поможет. - person Lionel; 20.02.2015