Grunt часы с livereload после javascript concat загружает страницу с предыдущим изменением не последним

Я работаю над приложением Angular. Я борюсь с grunt-contrib-watch и livereload, работающими правильно после того, как я запускаю другие задачи на моих файлах css и js.

В основном я делаю следующее:

  1. JsHint, конкатенируйте и расшифруйте js при изменении.
  2. Запустите 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 изменились.

Я испытываю две следующие проблемы:

  1. Как для моих файлов Javascript, так и для файлов HTML, он загружается в режиме реального времени, но в нем есть изменение, сделанное ранее, а не последнее изменение. То есть он отстает на одно изменение.
  2. Мой CSS вообще не перезагружается.

До того, как я добавил JSHint, livereload задач concat и uglify, казалось, работал правильно.

Может кто-нибудь сказать мне, что я сделал не так? Это проблема с задержкой во времени?

0 ответов

Другие вопросы по тегам