我使用grunt来查看所有更少的文件以进行更改，然后将更改写入css文件。我的文件目录设置如下：
为什么不能正确观看文件？
我的grunt文件是这样写的：
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']);
};
答案 0 :(得分：1)
您的文件结构和较少的任务是正确的。问题出在您的less任务或您options传递给livereload的问题上。尝试将livereload值硬编码为true。
如果这不起作用，可以查看您的less任务并确保其正常运行：grunt less。