404 node_modulesが見つかりません

gulpとangularを使って簡単なWebアプリケーションを作成しています。404 node_modulesが見つかりません

私がgulpを提供すると、アプリケーションはnode_modulesフォルダにあるものを見つけることができません。ここで

は私の一気ファイルです：

// generated on 2017-10-12 using generator-webapp 3.0.1 
const gulp = require('gulp'); 
const gulpLoadPlugins = require('gulp-load-plugins'); 
const browserSync = require('browser-sync').create(); 
const del = require('del'); 
const runSequence = require('run-sequence'); 

const $ = gulpLoadPlugins(); 
const reload = browserSync.reload; 

let dev = true; 

gulp.task('styles',() => { 
    return gulp.src('app/styles/*.css') 
    .pipe($.if(dev, $.sourcemaps.init())) 
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']})) 
    .pipe($.if(dev, $.sourcemaps.write())) 
    .pipe(gulp.dest('.tmp/styles')) 
    .pipe(reload({stream: true})); 
}); 

gulp.task('html', ['styles'],() => { 
    return gulp.src('app/*.html') 
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) 
    .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}}))) 
    .pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false}))) 
    .pipe($.if(/\.html$/, $.htmlmin({ 
     collapseWhitespace: true, 
     minifyCSS: true, 
     minifyJS: {compress: {drop_console: true}}, 
     processConditionalComments: true, 
     removeComments: true, 
     removeEmptyAttributes: true, 
     removeScriptTypeAttributes: true, 
     removeStyleLinkTypeAttributes: true 
    }))) 
    .pipe(gulp.dest('dist')); 
}); 

gulp.task('images',() => { 
    return gulp.src('app/images/**/*') 
    .pipe($.cache($.imagemin())) 
    .pipe(gulp.dest('dist/images')); 
}); 

gulp.task('fonts',() => { 
    return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {}) 
    .concat('app/fonts/**/*')) 
    .pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts'))); 
}); 

gulp.task('extras',() => { 
    return gulp.src([ 
    'app/*', 
    '!app/*.html' 
    ], { 
    dot: true 
    }).pipe(gulp.dest('dist')); 
}); 

gulp.task('clean', del.bind(null, ['.tmp', 'dist'])); 

gulp.task('serve',() => { 
    runSequence(['clean'], ['styles', 'fonts'],() => { 
    browserSync.init({ 
     notify: false, 
     port: 9000, 
     server: { 
     baseDir: ['.tmp', 'app'] 
     } 
    }); 

    gulp.watch([ 
     'app/*.html', 
     'app/images/**/*', 
     '.tmp/fonts/**/*' 
    ]).on('change', reload); 

    gulp.watch('app/styles/**/*.css', ['styles']); 
    gulp.watch('app/fonts/**/*', ['fonts']); 
    }); 
}); 

gulp.task('serve:dist', ['default'],() => { 
    browserSync.init({ 
    notify: false, 
    port: 9000, 
    server: { 
     baseDir: ['dist'] 
    } 
    }); 
}); 


gulp.task('build', ['html', 'images', 'fonts', 'extras'],() => { 
    return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); 
}); 

gulp.task('default',() => { 
    return new Promise(resolve => { 
    dev = false; 
    runSequence(['clean'], 'build', resolve); 
    }); 
});

とアプリ内の私のindex.htmlのようなものです：「node_modulesに私がポイントすべてが見つからないため、例えばので

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>paykey</title> 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
    <link rel="stylesheet" href="styles/main.css"> 
    <script src="node_modules/angular/angular.js"></script> 
    </head> 
    <body ng-app="myApp" >

スタイル "フォルダが同じレベルにあり、見つかりました。なぜこれが起こっているのか？

package.json：

{ 
    "private": true, 
    "engines": { 
    "node": ">=4" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.4.0", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-register": "^6.5.2", 
    "browser-sync": "^2.2.1", 
    "del": "^2.2.0", 
    "gulp": "^3.9.0", 
    "gulp-autoprefixer": "^3.0.1", 
    "gulp-babel": "^6.1.1", 
    "gulp-cache": "^0.4.2", 
    "gulp-cssnano": "^2.0.0", 
    "gulp-eslint": "^3.0.0", 
    "gulp-htmlmin": "^3.0.0", 
    "gulp-if": "^2.0.2", 
    "gulp-imagemin": "^3.0.1", 
    "gulp-load-plugins": "^1.2.4", 
    "gulp-plumber": "^1.0.1", 
    "gulp-size": "^2.1.0", 
    "gulp-sourcemaps": "^2.2.0", 
    "gulp-uglify": "^2.0.0", 
    "gulp-useref": "^3.0.0", 
    "main-bower-files": "^2.5.0", 
    "run-sequence": "^1.2.2", 
    "wiredep": "^4.0.0" 
    }, 
    "eslintConfig": { 
    "env": { 
     "es6": true, 
     "node": true, 
     "browser": true 
    }, 
    "rules": { 
     "quotes": [ 
     2, 
     "single" 
     ] 
    } 
    }, 
    "dependencies": { 
    "angular": "^1.6.6", 
    "bootstrap": "^3.3.7", 
    "jquery": "^3.2.1", 
    "modernizr": "^3.5.0", 
    "popper": "^1.0.0" 
    } 
}

出典

2017-11-15 arnoldssss

あなたserve:dist一気タスクはdistディレクトリからコンテンツを提供しています。 node_modulesにあるスクリプトをコピーするための新しいgulpタスクを作成する必要があります。それとも、Webpackを使うだけです。

出典

2017-11-15 00:26:01 cgatian

ありがとうございました。解決策として適したwebpackの例がありますか？ – arnoldssss

悲しいことに、このタイプのものには時間がかかります。私はGulpであまりにも深いプロジェクトのビルドプロセスを3日間リバースエンジニアリングしました。私のアドバイスは、新しいWebpackの設定から始め、最初から始めることです。ありがたいことに、あなたのGulpファイルは手の届かないものではありません。 – cgatian

当分は、必要なファイルをdistフォルダにコピーするための新しいタスクを作成するだけです。次に、それらを使用するために 'index.html'であなたのスクリプトを更新してください。 – cgatian

404 node_modulesが見つかりません

答えて

関連する問題