简体   繁体   中英

gulp inject not working properly

I am using gulp inject command to add my css and js files to the html page. When I am checking the file the file are injected but when I run the html page it shows file not found and it doesn`t load the files.

This is gulp file -

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....');
           })
})

This is my 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);
});

But still files not getting loaded on my html page.

错误 Can anyone help me in understanding what the problem is?

Files injected in html page:

HTML页面

Fixed the issue.

changed the line-

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

to this-

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM