taptapship / wiredep

Wire Bower dependencies to your source code.
MIT License
1.15k stars 142 forks source link

Add option to adapt path to libs #225

Closed jabaa closed 8 years ago

jabaa commented 8 years ago

I'm using laravel with angularjs and wiredep is called with wiredep -s public/app/index.html from package.json. The file structure is:

project/
|- public/
||- index.php
||- app/
|||- index.html
|||- libs/
||||- angular/

index.php is the entry point of laravel so the path to angularjs is /app/libs/angular/. wiredep generates a path starting at index.html. So I'm looking for an option to add app/ in front of each library.

HectorLS commented 8 years ago

Can you paste your current task please ? would be easier

jabaa commented 8 years ago

This is the Gulp Task:

gulp.task('bower', function () {
  gulp.src('./public/app/index.html')
    .pipe(wiredep({
                fileTypes: {
                    html: {
                        replace: {
                            css: '<link rel="stylesheet" type="text/css" href="app/{{filePath}}">',
                            js: '<script type="text/javascript" src="app/{{filePath}}"></script>'
                        }
                    }
                }
            }))
    .pipe(gulp.dest('./public/app'));
});

As far as I know, it is only possible, to do this with Gulp, not with a NPM Task and not with Grunt

HectorLS commented 8 years ago

Ok so the problem is that wiredep add a wrong path in the file you want, right ? This is a partial of my personal config ( working on it ) where i use wiredep for the index.html and _libs.scss and the paths are added correctly, hope this sample help you.

The config that i need for the gulp tasks

var src    = './src/',
    config = {};

config.src         : src;
config.index       : src + 'index.html';
config.sassSource  : src + 'scss/utilities/_libs.scss';
config.sassDest    : src + 'scss/utilities/';
config.jsSource    : [
                       src + 'js/**/*.module.js',
                       src + 'js/**/*.js',
                       '!' + src + 'js/**/*.spec.js'
                     ];

var wiredepOptions = {
  bowerJson: require('./bower.json'),
  directory: './bower_components/';
};

The folders and files structure

projectFolder/
  -- bower_components/
  -- node_modules/
  -- src/
      --css/
      --js/
      --scss/
          --utilities/
              --_libs.scss      // Here  you'll find a   //bower:scss 
                                                         //endbower
      -- index.html  // Here  you'll find a   <!-- bower:css -->   and   <!-- bower:js --> 
                     //                       <!-- endbower -->          <!-- endbower -->
  -- bower.json
  -- gulpfile.js
  -- package.json

And here Two tasks using wiredep for different path destination : )

 gulp.task('wiredep-js', function () {
  log('Wire up the bower js into the html')
  return gulp
    .src(config.index)
    .pipe(wiredep(wiredepOptions()))
    .pipe(gulp.dest(config.source));
});

 gulp.task('wiredep-sass', function () {
  log('wire up sass partials and inject into the _libs.scss file for vendors')
  return gulp
    .src(config.sassSource)
    .pipe(wiredep(wiredepOptions()))
    .pipe(gulp.dest(config.sassDest));
});
jabaa commented 8 years ago

Yes, but this uses Gulp. I'd like to avoid Gulp. I either use NPM tasks or Grunt tasks-

eddiemonge commented 8 years ago

@jabaa have you tried setting the cwd to public? https://github.com/taptapship/wiredep#configuration

If that doesn't work, let me know and I'll reopen this