gulp inject コマンドを使用して、css ファイルと js ファイルを html ページに追加しています。ファイルをチェックすると、ファイルが挿入されますが、html ページを実行すると、ファイルが見つからないことが表示され、ファイルが読み込まれません。
これはgulpファイルです -
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var nodemon = require('gulp-nodemon');
var jsFiles = ['*.js','src/**/*.js'];
gulp.task('style',function(){
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish',{
verbose: true
}));
});
gulp.task('inject',function(){
var wiredep = require('wiredep').stream;
var inject = require('gulp-inject');
var injectSrc = gulp.src([__dirname + '/public/css/*.css',__dirname + '/public/js/*.js'],{read: false});
var injectOptions = {
ignorePath: '../..public'
};
var options = {
bowerJson: require(__dirname + '/node_modules/bower/lib/node_modules/qs/bower.json'),
directory: './public/lib',
ignorePath: '../../public'
}
return gulp.src('./src/views/*.html')
.pipe(wiredep(options))
.pipe(inject(injectSrc,injectOptions))
.pipe(gulp.dest('./src/views'));
});
gulp.task('serve', ['style','inject'], function(){
var options = {
script: 'app.js',
delayTime: 1,
env:{
'PORT': 3000
},
watch: jsFiles
}
return nodemon(options)
.on('restart',function(ev){
console.log('Restarting....');
})
})
これは私の app.js です -
var express = require('express');
var app = express();
var port = process.env.PORT || 5000;
//app.use(express.static('public'));
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/src/views'));
app.get('/',function(req,res){
res.send('Hello World');
});
app.get('/books',function(req,res){
res.send('Hello Books');
});
app.listen(port,function(err){
console.log('running server on port'+ port);
});
しかし、まだファイルが HTML ページにロードされません。
問題が何であるかを理解するのを手伝ってくれる人はいますか?
HTML ページに挿入されたファイル:
