Question

我正在使用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页面中注入的文件：

Answer 1

修正了问题。

更改了行 -

var injectOptions = {
        ignorePath: '../..public'
    };

到此 -

var injectOptions = {
        ignorePath: '/public'
    };

gulp注射不正常

1 个答案: