咕unt少文件觀察器

Question

我使用grunt監視所有較少的文件是否有更改，然后將更改寫入css文件。 我的文件目錄設置如下：

• 應用程式
  • 組件
    • folder1> file.less
    • folder2> file.less
    • folder3> file.less

為什么這不能正確觀看文件？

我的咕unt文件是這樣寫的：

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

        require('load-grunt-tasks')(grunt);

        /*
         * Grunt tasks:
         * watch - watch the changes and rebuild less, templates, js and do reload
         * connect - run simple server
         * clean - delete temporary files/folders
         * less - to compile less
         * cssmin - to minify css (for vendor libs)
         * html2js - to compile AngularJS html-templates into one js file - templates.js
         * ngAnnotate - AngularJS modules minification (fix problems with annotation)
         * uglify - code uglification
         * copy - to copy files
         * sails-linker - to generate links to style-files and js-files in index.html
         *
         * Grunt commands:
         * grunt server(or just grunt) - to run server for dev env
         * grunt install - prepare dev env
         * grunt build - compile distributive (target folder)
         * grunt server:target - compile target and run server for it
         * */

        grunt.initConfig({

            appPath: 'app',  //path to application source
            distPath: 'target', //path to distributive

            watch: {
                html: {
                    files: ['<%= appPath %>/components/**/*.html'],
                    tasks: ['html2js']
                },
                less: {
                    files: ['app/components/**/*.less'],
                    tasks: ['less'],
                    options: {
                        livereload: '<%= connect.options.livereload %>'
                    }
                },
                js: {
                    files: ['<%= appPath %>/components/**/{,*/}*.js'],
                    options: {
                        livereload: '<%= connect.options.livereload %>'
                    },
                    tasks: ['sails-linker:app']
                }
            },

            connect: {
                options: {
                    port: 9000,
                    hostname: 'localhost',
                    livereload: 35729
                },
                app: {
                    options: {
                        open: true,
                        base: ['<%= appPath %>', '.']
                    }
                },
                dist: {
                    options: {
                        open: true,
                        base: '<%= distPath %>'
                    }
                }
            },

            clean: {
                target: '<%= distPath %>',
                tmp: '.tmp'
            },

            less: {
                development: {
                    files: {
                        '<%= appPath %>/common/css/main.css': 'app/common/css/main.less'
                    }
                }
            },

            cssmin: {
                combine: {
                    files: {
                        '<%= distPath %>/common/css/main.css': ['<%= appPath %>/common/css/main.css'],
                        '<%= distPath %>/common/css/vendor.css': [
                            'bower_components/bootstrap/dist/css/bootstrap.css',
                            'bower_components/bootstrapValidator/dist/css/bootstrapValidator.css',
                            'bower_components/css-toggle-switch/dist/toggle-switch.css',
                            'bower_components/fontawesome/css/font-awesome.css',
                            'bower_components/toastr/toastr.css'

                        ]
                    }
                }
            },

            html2js: {
                options: {
                    base: '<%= appPath %>/'
                },
                main: {
                    src: ['<%= appPath %>/components/**/*.html'],
                    dest: '<%= appPath %>/common/js/templates.js'
                }
            },

            ngAnnotate: {
                dist: {
                    files: {
                        '.tmp/app/common/js/scripts.js': ['<%= appPath %>/common/js/**/*.js']
                    }
                }
            },

            uglify: {
                dist: {
                    files: {
                        'target/common/js/scripts.js': ['.tmp/app/common/js/scripts.js'],
                        'target/common/js/vendor.js': ['bower_components/jquery/dist/jquery.js',
                            'bower_components/angular/angular.js',
                            'bower_components/angular-route/angular-route.js',
                            'bower_components/bootstrap/dist/js/bootstrap.js',
                            'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
                            'bower_components/angular-ui-router/release/angular-ui-router.js',
                            'bower_components/bootstrapValidator/dist/js/bootstrapValidator.js',
                            'bower_components/textAngular/dist/textAngular-sanitize.min.js',
                            'bower_components/textAngular/dist/textAngular.min.js',
                            'bower_components/angular-spinner/angular-spinner.js',
                            'bower_components/spin.js/spin.js',
                            'bower_components/restangular/dist/restangular.js',
                            'bower_components/toastr/toastr.js',
                            'bower_components/angular-animate/angular-animate.js',
                            'bower_components/angular-sanitize/angular-sanitize.js',
                            'bower_components/mb-scrollbar/mb-scrollbar.js'
                        ]
                    }
                }
            },

            copy: {
                dist: {
                    files: [
                        {
                            expand: true,
                            dot: true,
                            cwd: '<%= appPath %>',
                            dest: '<%= distPath %>',
                            src: [
                                'favicon.ico',
                                'robots.txt',
                                '.htaccess',
                                '*.html',
                                'assets/img/*',
                                'assets/pdf/*',
                                'data/*'
                            ]
                        },
                        {
                            expand: true,
                            cwd: 'bower_components/bootstrap/dist',
                            src: 'fonts/*',
                            dest: '<%= distPath %>'
                        },

                        {
                            expand: true,
                            cwd: 'bower_components/fontawesome',
                            src: 'fonts/*',
                            dest: '<%= distPath %>'
                        },

                        {
                            expand: true,
                            cwd: '<%= appPath %>/',
                            src: 'common/css/fonts/*',
                            dest: '<%= distPath %>'
                        }
                    ]
                }
            },

            'sails-linker': {
                app: {
                    options: {
                        appRoot: '<%= appPath %>/'
                    },
                    files: {
                        '<%= appPath %>/index.html': [
                            'bower_components/jquery/dist/jquery.js',
                            'bower_components/angular/angular.js',
                            'bower_components/angular-route/angular-route.js',
                            'bower_components/bootstrap/dist/js/bootstrap.js',
                            'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
                            'bower_components/angular-ui-router/release/angular-ui-router.js',
                            'bower_components/bootstrapValidator/dist/js/bootstrapValidator.js',
                            'bower_components/textAngular/dist/textAngular-sanitize.min.js',
                            'bower_components/textAngular/dist/textAngular.min.js',
                            'bower_components/angular-spinner/angular-spinner.js',
                            'bower_components/spin.js/spin.js',
                            'bower_components/restangular/dist/restangular.js',
                            'bower_components/toastr/toastr.js',
                            'bower_components/angular-animate/angular-animate.js',
                            'bower_components/angular-sanitize/angular-sanitize.js',
                            'bower_components/mb-scrollbar/mb-scrollbar.js',
                            'common/js/**/*.js']
                    }
                },
                dist: {
                    options: {
                        appRoot: '<%= distPath %>/'
                    },
                    files: {
                        '<%= distPath %>/index.html': [
                            '<%= distPath %>/common/js/vendor.js',
                            '<%= distPath %>/common/js/scripts.js'
                        ]
                    }
                },
                appCss: {
                    options: {
                        startTag: '<!--STYLES-->',
                        endTag: '<!--STYLES END-->',
                        fileTmpl: '<link rel="stylesheet" href="%s" />'
                    },
                    files: {
                        '<%= appPath %>/index.html':
                            ['bower_components/bootstrap/dist/css/bootstrap.css',
                                'bower_components/fontawesome/css/font-awesome.css',
                                'bower_components/bootstrapValidator/dist/css/bootstrapValidator.css',
                                'bower_components/css-toggle-switch/dist/toggle-switch.css',
                                'bower_components/toastr/toastr.css']
                    }
                },
                distCss:{
                    options: {
                        startTag: '<!--STYLES-->',
                        endTag: '<!--STYLES END-->',
                        fileTmpl: '<link rel="stylesheet" href="%s" />',
                        appRoot: '<%= distPath %>/'
                    },
                    files: {
                        '<%= distPath %>/index.html': ['<%= distPath %>/common/css/vendor.css']
                    }
                }


            }
        });


        grunt.registerTask('server', 'Compile then start a connect web server', function (target) {
            if (target === 'target') {
                grunt.task.run(['build', 'connect:dist:keepalive']);
            } else {
                grunt.task.run(['install', 'connect:app', 'watch']);
            }
        });

        grunt.registerTask('install', ['html2js', 'sails-linker:app', 'sails-linker:appCss']);
        grunt.registerTask('build', ['clean:target', 'html2js', 'less', 'ngAnnotate', 'uglify', 'copy:dist', 'sails-linker:dist',  'cssmin', 'sails-linker:distCss', 'clean:tmp']);
        grunt.registerTask('default', ['server']);
        };

Answer 1

您的文件結構和less任務是正確的。 問題在於您的任務less或傳遞給livereload的options 。 嘗試將livereload值硬編碼為true 。

如果那不起作用，也許檢查一下您的less任務，並確保其正常運行： grunt less 。