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>

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

1 个答案: