标签: gulp-inject

我正在尝试将ngmap注入我的jhipster项目.安装依赖后用

凉亭安装ngmap --save

它出现在我的bower.json文件中:

{
  "version": "0.0.0",
  "name": "myApp",
  "appPath": "src/main/webapp/",
  "testPath": "src/test/javascript/spec",
  "dependencies": {
    "angular": "1.5.8",
    "angular-aria": "1.5.8",
    "angular-bootstrap": "1.3.3",
    "angular-cache-buster": "0.4.3",
    "angular-cookies": "1.5.8",
    "angular-dynamic-locale": "0.1.32",
    "angular-i18n": "1.5.8",
    "ngstorage": "0.3.10",
    "angular-loading-bar": "0.9.0",
    "angular-resource": "1.5.8",
    "angular-sanitize": "1.5.8",
    "angular-translate": "2.11.1",
    "angular-translate-interpolation-messageformat": "2.11.1",
    "angular-translate-loader-partial": "2.11.1",
    "angular-translate-storage-cookie": "2.11.1",
    "angular-ui-router": "0.3.1",
    "bootstrap-sass": "3.3.7",
    "bootstrap-ui-datetime-picker": "2.4.3",
    "jquery": "3.1.0",
    "json3": "3.3.2",
    "messageformat": "0.3.1",
    "modernizr": "3.3.1",
    "ng-file-upload": "12.0.4",
    "ngInfiniteScroll": "1.3.0",
    "swagger-ui": "2.1.5",
    "arrive": "2.3.0",
    "bootstrap-material-design": "0.5.10",
    "ngmap": "^1.17.8"
  },
  "devDependencies": {
    "angular-mocks": "1.5.8"
  },
  "overrides": …

我试图将CDN和其他HTTP资源放入由gulp-inject修改的脚本中.

我在存储库中创建了一个相应的问题.

要点是我希望沿着这些方向发挥作用:

var sources = [
  "http://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.js",
  "./spec/test.js"
]

gulp.task('source', function () {
   gulp.src("src/my.html")
       .pipe(inject(sources))
       .dest("dest/")
})

结果如下dest/my.html:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.js'>
</script>
<script src='/spec/test.js'></script>

有人有什么想法？

我使用gulp-inject添加文件以加载到index.html。为了强制浏览器重新加载js脚本，我想向插入index.html的文件名添加查询字符串。

我怀疑这可以通过gulp-inject的transform函数实现。但是阅读文档我不明白如何解决。你呢？

我的目标是将最新的git commit附加到我的index.html文件中.

以下任务成功返回最新的git哈希(使用gulp-git):

var git = require('gulp-git');
gulp.task('hash', function() {
   git.revParse({args:'--short HEAD'}, function (err, hash) {
     return hash;
   });
});

以下任务构建我的HTML:

var inject = require('inject-string');
gulp.task('html', function () {
  return gulp.src('app/index.html')
    .pipe(inject.append('append git hash here!'))
    .pipe(gulp.dest('dist'))
});

这成功地附加了一个字符串,index.html但是如何将hash任务的返回值注入html？

我有 manjaro linux，我从官方存储库安装了 nodejs 和 npm

节点版本：v6.2.1

npm 版本：3.9.5

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')
        ], { read: false });
  
        var injectScripts = gulp.src([
            path.join(conf.paths.src, '/app/**/*.module.js'),
            path.join(conf.paths.src, '/app/**/*.js'),
            path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
            path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
        ])
        .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));
        var injectOptions = {
            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(wiredep(_.extend({}, conf.wiredep)))
        .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
 });

当我运行时：

$ gulp serve

它显示我：

[21:36:37] Using gulpfile …

将VS 2015更新为Update 2之后,由Task Runner Explorer执行失败,但是从控制台可以正常工作.

错误是已知的,但我不知道它与VS 2015有什么关系.它在VS 2013中运行良好.使用与nodeJs或VS 2013不同的javascript解释器吗？

它是Windows 7,Node.js 5.10.1.

错误:

Failed to run "C:\..\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
C:\..\node_modules\gulp-inject\src\inject\index.js:127
      startTag,
              ^
SyntaxError: Unexpected token ,
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (C:\..\node_modules\gulp-inject\index.js:4:28)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)

Failed to run "C:\..\package.json"...
Failed to run "C:\..\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
C:\..\node_modules\gulp-inject\src\inject\index.js:127
      startTag,
              ^
SyntaxError: Unexpected token ,
    at …

我在重建后的 gulp 注入中面临昨天的问题，gulp-inject 没有注入我的所有文件。只添加一个 main.scss 文件

在 gulp 样式任务中没有改变任何东西。相同的代码在我的舞台环境中工作，因为我没有重建 gulp。

这是代码片段。

  var injectFiles = gulp.src([
    path.join(conf.paths.src, '/sass/**/_*.scss'),
    '!' + path.join(conf.paths.src, '/sass/theme/conf/**/*.scss'),
    '!' + path.join(conf.paths.src, '/sass/404.scss'),
    '!' + path.join(conf.paths.src, '/sass/auth.scss')
  ], {read: false});

  var injectOptions = {
    transform: function (filePath) {
      filePath = filePath.replace(conf.paths.src + '/sass/', '');
      return '@import "' + filePath + '";';
    },
    starttag: '// injector',
    endtag: '// endinjector',
    addRootSlash: false
  };

  return gulp.src([
    path.join(conf.paths.src, '/sass/main.scss')
  ])
    .pipe($.inject(injectFiles, injectOptions))
    .pipe(wiredep(_.extend({}, conf.wiredep)))
    .pipe($.sourcemaps.init())
    .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
    .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/'))); …

我想用gulp-inject和注入bower依赖项main-bower-files.拾取依赖关系,但生成的路径是绝对的.

我得到了/www/lib/angular/angular.js,但我想要lib/angular/angular.js

<!-- bower:js -->
<script src="/www/lib/angular/angular.js"></script>
<!-- endinject -->

.bowerrc

{
  "directory": "www/lib"
}

gulpfile.js

var gulp = require('gulp');
var inject = require('gulp-inject');
var mainBowerFiles = require('main-bower-files');
var debug = require('gulp-debug');

gulp.task('index', function () {
    return gulp.src('./www/index.html')
        .pipe(inject(gulp.src(mainBowerFiles(), {read: false}, {relative: true}), {name: 'bower'}))
        .pipe(gulp.dest('./www'));
});

我正在使用Gulp和一些插件来模拟我的HTML并缩小我的HTML,即"gulp-file-include","gulp-inject","gulp-minify-html"似乎没有提供注入常量的方法在构建时,即这样的事情:

.pipe('*.html',$ .gulpVar({urlpath:'www.myurl.com'})))

然后在我的HTML中对变量的引用

联系我们

我可以找到最接近类似的东西是gulp-ng-constant虽然它将它注入JS并使用Angular,但我没有使用Angular并且希望将它注入到HTML中.是否有一个gulp插件具有该功能？

我现在正在注入这样的文件:

var gulp = require('gulp');
var inject = require('gulp-inject');

gulp.task('inject_rev', function () {
    var target = gulp.src('webapp/dist/somefolder/index.html');
    var sources = gulp.src(['webapp/dist/somefolder/*.js',], {read: false});

    return target.pipe(inject(sources))
        .pipe(gulp.dest('webapp/dist/somefolder/'));
});

但是在html文件中它不包含我需要的路径,如何更改此路径？所以例如代替这个:

<script src="/webapp/dist/somefolder/script-1253fe56bd.js"></script>

我可以这样:

<script src="/my/own/directory/script-1253fe56bd.js"></script>

我一直无法使用这个有用的工具,我不知道该怎么办,这就是我来这里寻求帮助的原因.

这是我的目录结构:

 - Project root
 |-  dist
     |-css
     |-js

 |-  source
     |- css
     |- js
     |-index.html

 |-gulpfile.js
 |-index.html 

所以,我正在使用gulp从源文件夹中将我的css,js注入到我的dist文件夹中,缩小,连接等等.然后,将其注入我的index.html中的源文件夹并吐入项目根文件夹.这是代码:

//Injects assets (css,js) into index.html automatically
gulp.task('inject',['sass','concat-css','concat-js'],function(){
    //Target to inject
    var target = gulp.src('source/index.html');


    //Sources to be injected

    var cssFiles = gulp.src('./dist/assets/css/*.css',{read:false});
    var jsFiles = gulp.src('./dist/assets/js/*.js',{read:false});
    //Merge resources into one
    var sources = es.merge(cssFiles,jsFiles);


    //Injecting bower.json dependencies and other resources

    return target.pipe(inject(sources),{
       ignorePath:'dist/',
        addRootSlash:false
    })
        .pipe(wiredep({ignorePath:'../'}))
        .pipe(gulp.dest('./'));

   });

问题是index.html上dist文件夹的路径是这样的:

"/dist/css/stylesheet.css"

导致错误,因为它应该是:`"dist/css/stylesheet.css"

正如您在代码中看到的,我使用了inject的选项,ignorePath,addRootSlash,relative:true,似乎没有任何效果.同样的事情发生在wiredep上,但是这个接受了ignorePath选项,所以一切都很好.

在此先感谢您的帮助.

到目前为止，这是我尝试过的：

gulp.task('watch-index-html', function () {
    gulp.watch(files, function (file) {
        return gulp.src('index/index.html')
            .pipe(inject(gulp.src(['index/base3.html']), {
                starttag: '<!-- inject:base3:html -->'
            }))
            .pipe(print(function (file) {
                return "Processing " + file;
             }))
            .pipe(gulp.dest('./'));
    });
});

这是发生了什么：

之前：

<body>
    abcd
    <!-- inject:base3:html -->
    <!-- endinject -->
    efgh

后：

<body>
    abcd
<!-- inject:base3:html -->
<link rel="import" href="/index/base3.html">
<!-- endinject -->
    efgh

我期望看到的是文件的实际内容，而不是该行：

<link rel="import" href="/index/base3.html">

谁能告诉我是否可以通过“插入文件内容”来执行此操作，gulp-inject或者是否还有其他应使用的内容。请注意，过去我尝试使用，gulp-mustache但是在插入字符（65279）时遇到了问题。我认为这与以下问题有关，但是我从来没有胡须为我工作：

如何避免在PHP中回显字符65279？（此问题也与Javascript xmlhttp.responseText（ajax）有关）

我希望有人可以给我一些建议，可以使用gulp-inject或或以gulp-mustache其他任何方式将文件内容插入另一个文件。