标签: gulp-inject

我有一个简单的Gulp构建过程设置用于测试.我已多次阅读文档,但我似乎无法通过Gulp-inject将我想要的脚本注入index.html文件中.

我的Gulp文件如下所示:

gulp.task('inject1', function() {
   return gulp.src('app/index.html')
        .pipe(inject(gulp.src('./app/scripts/app.js', {read : false}))) // Not necessary to read the files (will speed up things), we're only after their paths
        .pipe(gulp.dest("dist"));
});

gulp.task('inject2', function() {
    return gulp.src('app/scripts/**/*.js', {read : false}) // Not necessary to read the files (will speed up things), we're only after their paths
        .pipe(inject("./app/index.html"))
        .pipe(gulp.dest("./dist"));
});

这是我的Index.html的一部分:

<!-- inject:js -->

<!-- endinject-->

这两个都是从github上的文档中复制的.

当我运行这些任务中的任何一个时,控制台只是说"已启动"注入'完成'注入''

在我的./dist文件夹中,它创建了一个Index.html文件但没有注入js文件.

我已经尝试在src中键入并以许多不同的方式注入属性但没有运气.知道我做错了什么吗？

当部署我的应用我想将凉亭依赖复制到deploy该目录的链接,并注入到这些文件到index.html,这也是在deploy目录中.

单独的每一步都完美无缺,因为我无法将它们组合起来.

复制文件:

return gulp.src(mainBowerFiles(), { read: false })
    .pipe(gulp.dest('./deploy/lib/'));

注入文件:

return gulp.src('./deploy/index.html')
    .pipe(plugins.inject(
        gulp.src(mainBowerFiles(), { read: false }), { relative: true }))
    .pipe(gulp.dest('./deploy/'));

我认为我应该一步到位,以保持依赖文件的正确顺序.

我试过这个组合,但没有成功.

return gulp.src('./deploy/index.html')
    .pipe(plugins.inject(
        gulp.src(mainBowerFiles(), { read: false })
            .pipe(gulp.dest('./deploy/lib/'), { relative: true })))
    .pipe(gulp.dest('./deploy/'));

我试图设置gulp-inject来将依赖项注入index.html.除了转换功能外,一切正常.我需要以下列方式替换部分文件路径:/frontend/src/- > /static/我尝试这样做(从某处复制粘贴):

transform : function ( filePath, file, i, length ) {
                var newPath = filePath.replace('/frontend/src', '');
                console.log('inject script = '+ newPath);
                return '<script src="/static/' + newPath  + '"></script>';
            }

执行后,我在控制台中没有任何内容(标准gulp输出除外),并且未转换的文件路径出现在结果文件中.看起来我的自定义转换不会运行,而默认转换工作正常.

我正在尝试使用gulp-watch和gulp-inject来构建我的Node Web应用程序.然而,一旦涉及gulp-watch,似乎涉及gulp-inject的构建步骤将无法工作.看起来,原因是watch流不会结束,gulp-inject不知道何时开始.

我的gulpfile看起来如下:

var gulp = require('gulp')
var inject = require('gulp-inject')
var sass = require('gulp-sass')
var path = require('path')
var bower = require('gulp-bower')
var bowerFiles = require('main-bower-files')
var react = require('gulp-react')
var watch = require('gulp-watch')
var plumber = require('gulp-plumber')

var bowerDir = './bower_components/'?

gulp.task('bower', function () {
  return bower()
})

gulp.task('default', function () {
  var css = watch('./stylesheets/*.scss')
    .pipe(plumber())
    .pipe(sass({
?       includePaths: [
?         bowerDir + 'bootstrap-sass-official/assets/stylesheets',
?       ]
?    }))
    .pipe(gulp.dest('./public/css')) …

任何人都可以展示gulp-angular-filesort真正做什么以及如何正确使用它的例子吗？

问题是我最近意识到我的gulp -angular-filesort根本没有对angularjs文件进行排序,但是我的AngularJS App有很多文件可以正常工作.所以,我提出了两个问题:

1. AngualarJs仍然对源文件顺序敏感吗？对我来说,它看起来不是.
2. gulp-angular-filesort实际上做了什么？我看不到其工作的任何结果.

我认为gulp-angular-filesort根据括号中指定的依赖关系查看angular.module语句和排序文件.看起来我错了.

请看下面的示例.

//文件:Gulpfile.js

'use strict';

var
    gulp = require('gulp'),
    connect = require('gulp-connect'),
    angularFilesort = require('gulp-angular-filesort'),
    inject = require('gulp-inject');


gulp.task('default', function () {

    gulp.src('app/index.html')
        .pipe(inject(
            gulp.src(['app/js/**/*.js']).pipe(angularFilesort()),
            {
                addRootSlash: false,
                ignorePath: 'app'
            }
        ))
        .pipe(gulp.dest('app'))
    ;

    connect.server({
        root: 'app',
        port: 8081,
        livereload: true
    });

});

//a_services.js

'use strict';

angular.module('myServices', [])
    .factory('MyService', function () {
        return {
            myVar:1
        };
    })
;

//b_controllers.js

'use strict';

angular.module('myControllers', ['myServices'])
    .controller('MyController', function ($scope, MyService) {
        $scope.myVar = …

我试图运行以下代码

var $ = require('gulp-load-plugins')({ lazy: true }); // fetches gulp plugins

gulp.task('wiredep', function () {
     var wiredep = require('wiredep').stream;

    return gulp
    .src(config.index)
    .pipe(wiredep(config.wiredepDefaultOptions))      //wiredep injection configuration
    .pipe($.inject(gulp.src(config.js)))              //custom js files configuation
    .pipe(gulp.dest(config.client))
});



/* inject bower and other injections */
   gulp.task('inject', ['styles-compile', 'wiredep'], function () {
     return gulp
       .src(config.index)
       .pipe($.inject(gulp.src(config.css)))
       .pipe(gulp.dest(config.client))
});

//如果我评论以下一行 .pipe($.inject(gulp.src(config.css)))

然后我的.js文件会被注入,否则他们不会,从我的理解这个注入并行发生.

我究竟做错了什么？

我试图在weebroot文件夹中注入所有js文件(除了lib中的文件),并且在运行任务之后它说所有文件都被注入了.然而,似乎没有发生任何事情.这是我的任务:

gulp.task('index', function () {
  var target = gulp.src('Views/Shared/_Layout.cshtml');
  var sources = gulp.src(["./wwwroot/**/*.js", "!./wwwroot/lib/**"], { read: false });

return target.pipe(inject(sources))
  .pipe(gulp.dest('/Views/Shared'));
});

最奇怪的是它曾经工作过一次.我向一位同事寻求帮助,当她站在我身后似乎工作,但问题是它似乎已经工作了很多次,因为我突然注入了几个脚本,所以我删除了它们.下次运行任务时,_Layout.cshtml文件保持不变.我在我的html头中有这个:

 <!-- inject:js -->
<!-- endinject -->

我已经看到其他帖子(Gulp注入不起作用)这个问题,但他们说它是通过将结果传递给文件解决的,我相信我在任务结束时正在做

编辑:弄清楚出了什么问题.我错过了一个"." 在路径之前.它适用于"./Views/Shared ......"

我正在尝试在索引中注入一些文件,所有文件都连接在一起并缩小为.tmp文件夹,如下所示:

gulp.task('prep-js',['clean'], function(){
  var jspath = './src/page/**/*.js';
  var treatJs = gulp.src(jspath)
         .pipe(plugins.concat('scripts.js'))
         .pipe(plugins.uglify())
         .pipe(gulp.dest('.tmp/page/js'))
});

但是当我运行注入任务时,它说"没有注入index.html".这是代码:

gulp.task('inject-deps', ['prep-css', 'prep-js'], function(){

  //select main bower files
  var bowerDep = gulp.src(plugins.mainBowerFiles(), {read: false});

  //inject files
  return  gulp.src('./src/page/index.html')
          .pipe(plugins.inject(bowerDep, {relative: true, name:'bower'}))
          .pipe(plugins.inject(gulp.src('.tmp/page/js/*.js'), {name:'frontjs'}))
          .pipe(plugins.inject(gulp.src('.tmp/page/css/*.css'), {name:'frontcss'}))
          .pipe(gulp.dest('.tmp/page'));
});

有趣的是,注入主要凉亭文件的第一个管道工作完美,但它不会发生在以下两个.

另外,仅仅是为了获取信息,'plugins'是一个需要我的插件的变量.

对这个问题有什么看法吗？

我有几个亭子部件,其中我需要像一些部件json3,respondjs,es5shim以在IE8条件块被添加(在构建以及服务)这样的:

<!--[if lt IE 9]> <script src="bower_components/json3/json3.js"></script> <![endif]-->

我该如何着手编写任务？我找不到任何合适的例子gulp-inject以及wiredep这个问题.请指教

我正在尝试将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": …