README

用于与 Grunt-Contrib-Watch 一起使用的 Silex 服务提供者。

注册 ServiceProvider

$app = new Silex\Application();
$app['ten24.livereload.options'] = array(
  'port' => 35599,
  'host' => 'localhost',
  'enabled' => true,
  'check_server_presence' => true);
$app->register(new Ten24\Silex\Provider\LiveReloadServiceProvider());

一旦注册，提供者将在结束 body 标签之前注入 livereload.js 脚本。当与 grunt-contrib-watch 一起使用时，您的 JS、SCSS、LESS 或其他在 Gruntfile.js 中配置的任务将在 Grunt 任务成功完成后运行并触发页面/资源刷新。

注意 此注入取决于 X-DEBUG-TOKEN 响应头部的存在。实现此目的的最简单方法是使用 Silex 的 Web Profiler (https://github.com/silexphp/Silex-WebProfiler)。此外，当您处于开发阶段时，它还为您提供了一大批其他出色的工具。

if ($app['env'] == 'dev')
{
    $app->register(new Silex\Provider\WebProfilerServiceProvider(), array(
            'profiler.cache_dir' => $app['cache.path'].'/profiler',
            'profiler.mount_prefix' => '/_profiler',
    ));
}

##选项

以下选项可用，提供者会在 $app['ten24.livereload.options'] 中查找其配置。

• host (可选，默认: 'localhost')
• port (可选，默认: 35729)
• enabled (可选，默认: true)
• check_server_presence (可选，默认: true)

##示例

Gruntfile.js

module.exports = function (grunt) {
    "use strict";

    var MyProject;

    var resourcesPath = 'src/MyProject/Resources/';
    
    MyProject = {
        'destination':  'web/frontend/',
        'js':           [resourcesPath+'public/**/*.js', '!'+ resourcesPath+'public/vendor/**/*.js', 'Gruntfile.js'],
        'all_scss':     [resourcesPath+'public/scss/**/*.scss', bundlesPath+'public/scss/**/*.scss'],
        'scss':         [resourcesPath+'public/scss/style.scss'],
    };

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        watch: {
            MyProjectScss: {
                files: MyProject.all_scss,
                tasks: ['sass', 'cmq', 'cssmin']
            },
            MyProjectJs: {
                files: MyProject.js,
                tasks: ['uglify', 'concat']
            },
            MyProjectImages: {
                files: MyProject.img,
                tasks: ['imagemin:Ten24MemFaultBundle'],
                options: {
                    event: ['added', 'changed']
                }
            },
            livereload: {
                files: ['web/frontend/css/style.min.css', 'web/frontend/js/script.min.js'],
                options: {
                    livereload: true
                }
            }
        },

        sass: {
            MyProject: {
                options: {
                    style: 'compressed'
                },
                files: {
                    'web/frontend/.temp/css/style.css': [ resourcesPath+'public/scss/style.scss' ],
                }
            }
        },

        cmq: {
            MyProject: {
                files: {
                    'web/frontend/.temp/css/': 'web/frontend/.temp/css/style.css'
                }
            }
        },

        cssmin: {
            MyProject: {
                files: {
                    'web/frontend/css/style.min.css': [
                        'web/frontend/.temp/css/style.css'
                    ]
                }
            }
        },

        jshint: {
            options: {
                camelcase: true,
                curly: true,
                eqeqeq: true,
                eqnull: true,
                forin: true,
                indent: 4,
                trailing: true,
                undef: true,
                browser: true,
                devel: true,
                node: true,
                globals: {
                    jQuery: true,
                    $: true
                }
            },
            MyProject: {
                files: {
                    src: MyProject.js
                }
            }
        },

        uglify: {
            vendors: {
                options: {
                    mangle: {
                        except: ['jQuery']
                    }
                },
                files: {
                    'web/frontend/.temp/js/vendors.min.js': [
                        'web/vendor/jquery/jquery.js',
                        'web/vendor/bootstrap-sass/js/collapse.js',
                        'web/vendor/bootstrap-sass/js/dropdown.js',
                        'web/vendor/fancybox/source/jquery.fancybox.js',
                    ]
                }
            },
            MyProject: {
                files: {
                    'web/frontend/.temp/js/app.min.js': [resourcesPath+'public/js/**/*.js']
                }
            }
        },

        concat: {
            js: {
                src: [
                    'web/frontend/js/modernizr-custom.js',
                    'web/frontend/.temp/js/vendors.min.js',
                    'web/frontend/.temp/js/app.min.js'
                ],
                dest: 'web/frontend/js/footer.min.js'
            }
        },

        modernizr: {
            MyProject: {
                devFile: 'remote',
                parseFiles: true,
                files: {
                    src: [
                        MyProject.js,
                        MyProject.all_scss,
                        MyProject.twig
                    ]
                },
                outputFile: MyProject.destination + 'js/modernizr-custom.js',

                extra: {
                    'shiv' : false,
                    'printshiv' : false,
                    'load' : true,
                    'mq' : false,
                    'cssclasses' : true
                },
                extensibility: {
                    'addtest' : false,
                    'prefixed' : false,
                    'teststyles' : false,
                    'testprops' : false,
                    'testallprops' : false,
                    'hasevents' : false,
                    'prefixes' : false,
                    'domprefixes' : false
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks("grunt-modernizr");
    grunt.loadNpmTasks('grunt-notify');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-combine-media-queries');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.registerTask('default', ['watch']);
    grunt.registerTask('build', ['sass', 'cmq', 'cssmin', 'modernizr', 'uglify', 'concat']);
};

在模板中引用编译后的文件

<link rel="stylesheet" href="/frontend/css/style.min.css" type="text/css" />

在壳中运行 'grunt-watch'，修改源文件，并尝试改掉那个讨厌的 Control-R 习惯，好吗？ :D