Ошибка кэширования Gulp

У меня проблема, связанная с очисткой кеша. Мой код ниже:Ошибка кэширования Gulp

App.js

require('angular') 
require('angular-ui-router') 
var MainController = require('./controllers/MainController') 

angular.module('app', ['ui.router']) 
.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
     .state('home', { 
      url: '/home' 
      template: '<h1>Hello world !</h1>' 

     }) 

}]) 
.controller('MainCtrl', ['$scope', 'MainController']);

Gulpfile.js

var gulp = require('gulp'); 
var sass = require('gulp-ruby-sass'); 
var connect = require('gulp-connect'); 
var browserify = require('browserify'); 
var source = require('vinyl-source-stream') 
var CacheBuster = require('gulp-cachebust'); 

var cachebust = new CacheBuster(); 



gulp.task('connect', function(){ 
    connect.server({ 
     root: 'public', 
     port: 4000 
    }) 
}) 

gulp.task('browserify', function(){ 

    return browserify('./app/app.js') 
    .bundle() 
    .pipe(source('main.js')) 
    //save it to public/js/ directory 
    .pipe(gulp.dest('./public/js/')) 
}) 
gulp.task('sass', function(){ 
    return sass('sass/style.scss') 
     .pipe(gulp.dest('./public/css')) 
}) 
//Cache buster 
gulp.task('build-css', function() { 
    return gulp.src('styles/*.css') 
     // Awesome css stuff 
     .pipe(cachebust.resources()) 
     .pipe(gulp.dest('public/css')); 
}); 

gulp.task('build-html', ['build-css'], function() { 
    return gulp.src('/*.html') 
     // Awesome html stuff 
     .pipe(cachebust.references()) 
     .pipe(gulp.dest('public')); 
}); 
gulp.task('build-js', ['build-css', 'build-html'], function() { 
    return gulp.src('/*.js') 
     // Awesome html stuff 
     .pipe(cachebust.resources()) 
     .pipe(gulp.dest('public/js')); 
}); 
gulp.task('watch', function(){ 
    gulp.watch('app/**/*.js', ['browserify', 'build-js']) 
    gulp.watch('sass/style.scss', ['sass', 'build-css']) 
    gulp.watch('index.html', [ 'build-html']) 
}) 

gulp.task('default', ['connect', 'watch'])

В основном я вижу старый HTML, JS файлы. Не проверял другие расширения. Но, вероятно, это неправильная реализация.

Я использовал модуль npm от here.

Пожалуйста, помогите установить его правильно.

Кроме того, помогите мне узнать, как я могу отлаживать и проверять, какие задачи запуска выполнить? Console.log заявления не потрудились выплевывать что-либо в отношении моего фрагмента.

UPDATE: Index.html

<!DOCTYPE html> 
<html lang="en" ng-app="app"> 
<head> 
    <meta charset="UTF-8"> 
    <title>My App</title> 
    <link rel="stylesheet" href="/css/style.css"> 
    <script src="/js/main.js"></script> 
</head> 
<body> 
    <div ng-controller="MainCtrl"> 
    <h1>{{message}}</h1>  
    <div ui-view></div> 
    </div> 
</body> 
</html>

UDDATE 2

Вот мерзавец Repo

https://github.com/kushalmahajan/angular_boilerplate2.git

источник

2016-09-26 kushalvm

Пример кода был просто изменен, поэтому я удалил свой комментарий. – Hampus

Если вы открываете свой HTML-файл после задачи build-html, ссылки на файлы согласуются с сгенерированными именами файлов?Кроме того, если вы проверяете источник при загрузке в браузере, HTML выглядит так же, как в вашей файловой системе? – Hampus

Не совсем. Html не отражает это '

' – kushalvm

Казалось бы, что проблема только с проблемой gulp-cachebust. Я решил это, используя gulp-cache

источник

2016-09-27 11:38:28 kushalvm

Я не понимаю вашу проблему, вы seing старые файлы, так что

cachebust.resources()/cachebust.references()

не работает, не так ли? Если это проблема, я не знаю правильного ответа на 100%, но, глядя на документацию, вам сначала нужно сменить MD5, а затем переписать ссылки. (Он сказал переписывает ссылки на ресурсы, которые были переименованы в соответствии с их контрольная сумма MD5.) Так что я supose вы должны сначала переименовать (CacheBuster.resources()), а затем переписать (CacheBuster.references()) Но это всего лишь теория (и, возможно, вы уже называете ее в правильном порядке).

Однако, если вы хотите отлаживать код глотка (как вы просили) и у вас есть Visual Studio кода вы можете добавить этот код в ваш launch.json файл

{ 
     //Name of configuration. 
     "name": "debug gulp", 
     "type": "node", 
     //Workspace relative or absolute path to the program. 
     "program":"${workspaceRoot}/node_modules/gulp/bin/gulp.js", 
     //Command line arguments passed to the program. 
     "args":["server"], 
     //Workspace path to the runtime to be debugged. 
     "cwd": "${workspaceRoot}", 
     //Enviroment variables passed to the program. 
     "env":{}, 
     "sourceMaps": true 
    }

и называете «отладку глоткой» в параметрах запуска , Вы можете поместить точку останова всюду в свой код javascript (.js) gulp.

источник

2016-09-26 14:17:30

У вас проблема. Но для отладки одной установки визуальной студии слишком много – kushalvm

Ну, я нашел [это] (http://www.greg5green.com/blog/debugging-gulp-js-tasks/) этот поиск в Интернете. Вы можете отлаживать браузер, и вам нужен только модуль npm, установленный глобально. Грегори Грин объясняет это очень хорошо. Извините, но я всегда использую визуальный код студийного кода: P Итак, я ответил на то, что знаю. –

Ошибка кэширования Gulp

ответ

Смежные вопросы