injecting node_modules files add index.js content as main index.html code again

Question

injecting node_modules files add index.js content as main index.html code again

zymr-keshav opened this issue 7 years ago · 0 comments

mac os 10.13.1
gulp-inject v 4.3.0

'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var $ = require('gulp-load-plugins')();
var es = require('event-stream');

var mainNPMFiles = require('npmfiles');

// var wiredep = require('wiredep').stream;
// var _ = require('lodash');


gulp.task('inject-reload', ['inject'], function() {
  $.connect.reload();
});

gulp.task('inject', ['scripts', 'styles'], function() {
  var injectStyles = gulp.src([
    path.join(conf.paths.tmp, '/serve/app/**/*.css'),
    path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
  ]);

  var injectScripts = gulp.src([
      path.join(conf.paths.src, '/app/**/*.js'),
      path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
      path.join('!' + conf.paths.src, '/app/**/*.mock.js')
    ])
    // support for es6
    .pipe($.babel({"presets": [ ["env", { modules: false}] ], compact: false}))
    .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));

  // for 3rd party js files
  var injectOptions = {
    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
    addRootSlash: false
  };

  var injectVendor = gulp.src([path.join(conf.paths.src, '/libs/**/*.js')], {
    read: false
  });
  var vendorOptions = {
    starttag: '<!-- inject:vendor -->',
    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
    addRootSlash: false
  };

  var npmVendors = gulp.src(mainNPMFiles( {nodeModulesPath: '../node_modules/'} ));

  var npmOptions = {
    relative: true,
    starttag: '<!-- inject:npm -->',
    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
    addRootSlash: false
  };

  return gulp.src(path.join(conf.paths.src, '/*.html'))
    .pipe($.inject(injectStyles, injectOptions))
    .pipe($.inject(injectScripts, injectOptions))
    .pipe($.inject(injectVendor, vendorOptions))
    .pipe($.inject(npmVendors, npmOptions))
    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});

###.tmp/index.html

<!doctype html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
    <base href="/" />
    <title ng-bind="state.current.data.pageTitle"></title>
    <meta name="description" content="Zeus System">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <link rel="stylesheet" href="app/index.css">
    <!-- endinject -->
    <!-- endbuild -->
</head>

<body ng-controller="MainController as main">
    <div ng-include="'app/views/common/content.html'"></div>
    <!-- build:js(src) scripts/vendor.js -->
    <!-- inject:npm -->
    <script src="../node_modules/@uirouter/angularjs/release/ui-router-angularjs.js"></script>
    <script src="../node_modules/angular/index.js"></script>
    <script src="../node_modules/angular-animate/index.js"></script>
    <script src="../node_modules/angular-aria/index.js"></script>
    <script src="../node_modules/angular-chart.js/dist/angular-chart.js"></script>
    <script src="../node_modules/angular-messages/index.js"></script>
    <script src="../node_modules/angular-recaptcha/index.js"></script>
    <script src="../node_modules/angular-resource/index.js"></script>
    <script src="../node_modules/angular-sanitize/index.js"></script>
    <script src="../node_modules/angular-toastr/index.js"></script>
    <script src="../node_modules/angular-touch/index.js"></script>
    <script src="../node_modules/angular-ui-bootstrap/index.js"></script>
    <script src="../node_modules/angular-ui-sortable/src/sortable.js"></script>
    <script src="../node_modules/angular-ui-validate/index.js"></script>
    <script src="../node_modules/chart.js/dist/Chart.bundle.min.js"></script>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/moment/moment.js"></script>
    <script src="../node_modules/ng-stomp/dist/ng-stomp.min.js"></script>
    <script src="../node_modules/ng-table/dist/ng-table.js"></script>
    <script src="../node_modules/ngstorage/ngStorage.js"></script>
    <script src="../node_modules/pace/pace.js"></script>
    <!-- endinject -->
    <!-- inject:vendor -->
    <!-- files in the es5 vendor folder will be injected here -->
    <!-- endinject -->
    <!-- endbuild -->
    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <script src="app/index.module.js"></script>
    ...
    <script src="app/app.constant.js"></script>
    <!-- endinject -->
    <!-- inject:partials -->
    <!-- angular templates will be automatically converted in js and inserted here -->
    <!-- endinject -->
    <!-- endbuild -->
</body>

</html>

all these node_modules/packages/index.js has the index.html code when checking in the console.

why so?

also tried without realtive options

see the screenshot