2
キャッシュのクリアに関する問題があります。 私のコードは以下の通りです：基本的に私は古いHTML、JSファイルを見ていギャルのキャッシュバストが機能しない
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'])
。他の拡張子を確認していない。しかしおそらく、これは正しい実装ではないでしょう。
hereからnpmモジュールを使用しました。
正しく設定してください。
また、どのようにデバッグし、gulpのどのタスクを実行できるかを知るのに役立ちますか？ 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
ここでGitのレポ
https://github.com/kushalmahajan/angular_boilerplate2.git
コード例は劇的に変更されていますので、私のコメントは削除されました。 – Hampus
build-htmlタスクの後にHTMLファイルを開くと、ファイル参照は生成されたファイル名と一致しますか？また、ブラウザーに読み込まれたソースを調べると、HTMLはファイルシステムと同じに見えますか？ – Hampus
正確ではありません。 htmlにはこれが反映されません。 '
' – kushalvm