注入 index.html 后，Gulp 路径不是相关路径

Question

如果我做错了什么，我将不胜感激。

首先；这是我第一次设置 Gulp，我不是专业人士。

我正在现有应用程序中设置 Gulp，使用 Wiredep 和 gulp-inject 读取我的 bower_components 和自定义 .js 文件的文件路径，并将这些路径注入我的 index.html。

我遇到的问题是；在浏览器中运行应用程序时，除了凉亭路径之外，没有任何路径正常工作，导致大量 404 errors: Not Found。

读取文件名的路径是（示例）'./src/vendorScripts/'，这会将文件作为<script src="/src/vendorScripts/ChartFactory.js"></script> 添加到index.html，而路径应该是<script src="vedorScripts/ChartFactory.js"></script>。

这是我的 gulp.config.js 文件：

module.exports = function () {
    var source = './src/';
    var sourceScripts = './src/scripts/';
    var sourceScriptsPlugins = './src/scripts/plugins/';
    var vendorcripts = './src/vendorScripts/';
    var vendorcriptsUsedInApp = './src/vendorScripts/usedInApp/';
    var sourceScriptsSocialMedia = './src/socialMedia.module/';
    var sourceScriptsCookiesModule = './src/cookies.module/';

    var config = {
        temp: './.temp/',

        /**
         * File paths
         */
        // all js to vet
        alljs: [
            './src/**/*.js',
            './*.js'
        ],
        source: source,
        index: source + 'index.html',
        js: [
            sourceScripts + '**/app.js',
            sourceScriptsPlugins + '**/*.js',
            vendorcriptsUsedInApp + '**/*.js',
            sourceScripts + '**/*Controller.js',
            sourceScriptsSocialMedia + '**/*.js',
            sourceScriptsCookiesModule + '**/*.js',
            sourceScripts + '**/*Directive.js',
            sourceScripts + '**/*Filter.js',
            sourceScripts + '**/*Service.js',
            sourceScripts + '**/*Factory.js',
            sourceScripts + '**/*Constant.js'
        ],
        less: source + './src/styles/main.less',

        /**
         * Bower and NPM locations
         */
        bower: {
            json: require('./bower.json'),
            directory: './bower_components/',
            ignorePath: '../..'
        }
    };

    config.getWiredepDefaultOptions = function (){
        var options = {
            bowerJson: config.bower.json,
            directory: config.bower.directory,
            ignorePath: config.bower.ignorePath
        };
        return options;
    };

    return config;
};

这是我的 gulpfile.js：

var gulp = require('gulp');
var args = require('yargs').argv;
var config = require('./gulp.config')();
var del = require('del');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;
var $ = require('gulp-load-plugins')({ lazy: true });

gulp.task('vet', function () {
    log('Analysing source with JSHint and JSCS');

    return gulp
        .src(config.alljs)
        .pipe($.if(args.verbose, $.print()))
        .pipe($.jscs())
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
        .pipe($.jshint.reporter('fail'));

});

gulp.task('styles', ['clean-styles'], function () {
    log('Compiling Less --> CSS');

    return gulp
        .src(config.less)
        .pipe($.plumber())
        .pipe($.less())
        .pipe($.autoprefixer({ browsers: ['last 2 versions', '> 5%'] }))
        .pipe(gulp.dest(config.temp));
});

gulp.task('clean-styles', function(){
    var files = config.temp + '**/*.css';
    return clean(files);
});

gulp.task('less-watcher', function(){
    gulp.watch([config.less], ['styles']);
});


gulp.task('wiredep', function () {
    // log('Wire up the bower css js and our app js into the html');
    var options = config.getWiredepDefaultOptions();

    return gulp
        .src(config.index)
        .pipe(wiredep(options))
        .pipe($.inject(gulp.src(config.js)))
        .pipe(gulp.dest(config.source))
        .pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
        .pipe($.jshint.reporter('fail'));
});

//////////////
function clean(path){
    log('Cleaning: ' + $.util.colors.blue(path));
    return del(path); // returns a promise
}

function log(msg) {
    if (typeof (msg) === 'object') {
        for (var item in msg) {
            if (msg.hasOwnProperty(item)) {
                $.util.log($.util.colors.blue(msg[item]));
            }
        }
    } else {
        $.util.log($.util.colors.blue(msg));
    }
}

这张图片显示了我的目录列表：

非常感谢您的建议！

Answer 1

我设法使用以下解决方案解决了我的问题：

注意： gulp-inject 采用各种选项，可用于定义目标和其他设置。您可以在官方 npm gulp-inject 页面上阅读更多信息：gulp-inject。

下面的选项object 解决了我在相对路径和根斜杠方面的问题。我将此添加到我的 gulpfile.js 中：

var injectOptions = {
     addRootSlash: false,
     ignorePath: 'src/'
};

然后将injectOptions 添加到我的gulp.task('wiredep')：

gulp.task('wiredep', function () {
    var options = config.getWiredepDefaultOptions();

return gulp
    .src(config.index)
    .pipe(wiredep(options))
    .pipe($.inject(gulp.src(config.js), injectOptions))
    .pipe(gulp.dest(config.source))
    .pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
    .pipe($.jshint.reporter('fail'));
});

输出是所需的脚本源：

<script src="vedorScripts/ChartFactory.js"></script>