Grunt часы с livereload после javascript concat загружает страницу с предыдущим изменением не последним
Я работаю над приложением Angular. Я борюсь с grunt-contrib-watch и livereload, работающими правильно после того, как я запускаю другие задачи на моих файлах css и js.
В основном я делаю следующее:
- JsHint, конкатенируйте и расшифруйте js при изменении.
- Запустите autoprefixer при изменении css.
Оба из них создают новые файлы, которые я включаю на моей странице индекса.
Когда эти новые файлы будут созданы, я хочу, чтобы они были загружены в моем браузере.
Вот мой Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
autoprefixer: {
dist: {
files: {
'webapp/assets/css/build/rm.css': 'webapp/assets/css/pre/rm.css'
}
},
options: {
browsers: ['Explorer >= 8', '> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
}
},
concat: {
dist: {
src: [
'webapp/app.js', // This specific file
'webapp/shared/**/*.js', // All the shared angular files
'webapp/specific/**/*.js', // All the page specific angular files
'!webapp/shared/tests/*.js', //Remove tests
'!webapp/specific/*/tests/*.js' //Remove tests
],
dest: 'webapp/assets/libs/production.js',
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'webapp/assets/libs/production.js',
dest: 'webapp/assets/libs/production.min.js'
}
},
jshint: {
options: {
reporter: require('jshint-stylish'),
predef: [ "angular", "describe", "beforeEach", "module", "inject", "expect", "it" ]
},
target: ['webapp/app.js', 'webapp/shared/**/*.js', 'webapp/specific/**/*.js']
},
watch: {
scripts: {
files: ['webapp/app.js', 'webapp/shared/**/*.js', 'webapp/specific/**/*.js',
'!webapp/shared/tests/*.js', '!webapp/specific/*/tests/*.js'],
tasks: ['jshint', 'concat', 'uglify'],
},
styles: {
files: ['webapp/assets/css/pre/*.css'],
tasks: ['autoprefixer'],
},
livereload: {
options: {
livereload: true,
},
files: ['webapp/assets/libs/production.js',
'webapp/assets/libs/production.min.js',
'webapp/assets/css/build/rm.css',
'webapp/shared/**/*.html',
'webapp/specific/**/*.html',
'webapp/index.html']
},
}
});
В мой index.html я включаю встроенные файлы css и production.min.js:
<link rel="stylesheet" href="assets/css/build/rm.css">
<script type="text/javascript" src="assets/libs/production.min.js"></script>
Я попытался вживую перезагрузить как расширение Chrome, так и добавив тег script в свой HTML
Мои выходные данные распознают, что постобработанные файлы production.min.js & build/rm.css изменились.
Я испытываю две следующие проблемы:
- Как для моих файлов Javascript, так и для файлов HTML, он загружается в режиме реального времени, но в нем есть изменение, сделанное ранее, а не последнее изменение. То есть он отстает на одно изменение.
- Мой CSS вообще не перезагружается.
До того, как я добавил JSHint, livereload задач concat и uglify, казалось, работал правильно.
Может кто-нибудь сказать мне, что я сделал не так? Это проблема с задержкой во времени?