0

I have this yeoman generated GruntFile.js. When I run "grunt" the dist folder does not change all my scripts from bower_components/*.js, only some of them.

Here is a sample of index.html from dist folder

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-resource.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-messages.min.js"></script>
<script src="bower_components/angular-utf8-base64/angular-utf8-base64.js"></script>
<script src="bower_components/ng-table/ng-table.js"></script>
<script src="bower_components/lodash/dist/lodash.js"></script>
<script src="bower_components/angular-growl-v2/build/angular-growl.js"></script>
<script src="bower_components/nya-bootstrap-select/dist/js/nya-bs-select.js"></script>

As you can see it doesn't find the correct js file to use. How can I fix this? The same issue is with my css files

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="bower_components/ng-table/ng-table.css">
  <link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
  <link rel="stylesheet" href="bower_components/nya-bootstrap-select/dist/css/nya-bs-select.css">

Thanks! If you spot any other mistakes or improvements in my GruntFile.js please let me know

EDIT

Here is my bower.json file

{
  "name": "civilization-web",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.3.7",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap": "~3.3.1",
    "angular-resource": "~1.3.7",
    "angular-sanitize": "~1.3.7",
    "angular-animate": "~1.3.7",
    "angular-touch": "~1.3.7",
    "angular-route": "~1.3.7",
    "angular-utf8-base64": "~0.0.5",
    "angular-messages": "~1.3.8",
    "ng-table": "~0.3.3",
    "angular-bootstrap": "~0.12.0",
    "ng-file-upload": "~2.0.5",
    "ng-file-upload-shim": "~2.0.5",
    "lodash": "2.4.1",
    "angular-growl-v2": "~0.7.3",
    "nya-bootstrap-select": "~2.0.8"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.7",
    "angular-scenario": "~1.3.7"
  },
  "appPath": "app",
  "resolutions": {
    "angular": "1.3.8"
  }
}

Here is my package.json

{
  "name": "civilizationweb",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^0.7.3",
    "grunt-concurrent": "^0.5.0",
    "grunt-contrib-clean": "^0.5.0",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-connect": "^0.7.1",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-cssmin": "^0.9.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-imagemin": "^0.8.1",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^0.2.1",
    "grunt-google-cdn": "^0.4.0",
    "grunt-karma": "^0.9.0",
    "grunt-newer": "^0.7.0",
    "grunt-ng-annotate": "^0.10.0",
    "grunt-svgmin": "^0.4.0",
    "grunt-usemin": "^2.1.1",
    "grunt-wiredep": "^1.7.0",
    "jshint-stylish": "^0.2.0",
    "karma": "^0.12.24",
    "karma-jasmine": "^0.1.5",
    "karma-phantomjs-launcher": "^0.1.4",
    "load-grunt-tasks": "^0.4.0",
    "time-grunt": "^0.3.1"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "grunt test"
  }
}
Shervin Asgari
  • 23,901
  • 30
  • 103
  • 143
  • Do you try `bower install --save`? npm only install bower, but you have to install bower packages after that. `-S, --save: Save installed packages into the project’s bower.json dependencies`. Source here: http://bower.io/docs/api/#install – Petroff Mar 31 '15 at 15:21
  • I have run bower install --save. I can post my bower.json file as well – Shervin Asgari Apr 01 '15 at 07:42
  • Does it work when you just run "grunt wiredep" -- this task should wire up the dependencies. I tried with your bower.json and *just* wiredep, that worked. – ddprrt Apr 04 '15 at 19:01
  • Oh, and you might give us a link to your package.json. Maybe some grunt-tasks have been updated and work better now. – ddprrt Apr 04 '15 at 19:23
  • I added my package.json. Will try wiredep and report back – Shervin Asgari Apr 04 '15 at 19:54
  • `"grunt wiredep" ` is running without any errors. Though I can't see that it is actually doing anything – Shervin Asgari Apr 05 '15 at 11:44
  • Have a ready of the [wiredep docs](https://github.com/taptapship/wiredep#what-can-go-wrong), it may be that these missing dependencies do not have a compliment bower config. There are instructions for remedying this in these docs. Note you are using `cdnify` also, this converts known libs to cdn versions. best of luck. – Matthew.Lothian Apr 08 '15 at 00:30
  • Which yeoman generator are you using? – Chris Gunawardena Apr 08 '15 at 00:59

4 Answers4

2

Unless you tell grunt to copy these files to /dist folder as a part of the build process, it won't do anything. You can use grunt copy to do this.

// Copies remaining files to places other tasks can use
copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.client %>',
      dest: '<%= yeoman.dist %>/public',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'assets/images/{,*/}*.{webp}',
        'assets/fonts/**/*',
        'index.html'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/public/assets/images',
      src: ['generated/*']
    }, {
      expand: true,
      dest: '<%= yeoman.dist %>',
      src: [
        'package.json',
        'server/**/*'
      ]
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.client %>',
    dest: '.tmp/',
    src: ['{app,components}/**/*.css']
  }
},

I recommended you also use concat/usemin to concatenate all your javascript. 

<!-- build:js({.tmp,client}) app/concat.js -->
<script src="app/app1.js"></script>
<script src="app/app2.js"></script>
<script src="app/app3.js"></script>
<!-- endbuild -->

This will create one concat.js files using the script tags between <!-- build:js --> tags. this file can then by copied using grunt copy.

Chris Gunawardena
  • 6,246
  • 1
  • 29
  • 45
  • This is written in my GruntFile.js `// The following *-min tasks will produce minified files in the dist folder // By default, your `index.html`'s will take care of // minification. These next options are pre-configured if you do not wish // to use the Usemin blocks.` I thought this means that there is a block called prepareMin that does this. But does that mean I have to uncomment those out? – Shervin Asgari Apr 08 '15 at 15:41
  • The grunt code you pasted, can I copy paste that in, or do I need to modify it? – Shervin Asgari Apr 08 '15 at 16:26
  • I didn't notice the link to your grunt file so the code above is only a example. Now looking at your grunt file, the task useminPrepare will go over your ``blocks and concat & uglifys your code and copies to /dist folder and they all look good. Are your script tags in html page wrapped in `` comments like in the example code above? Also what yeoman generator are you using? – Chris Gunawardena Apr 08 '15 at 23:59
  • No they are not tagged like that. I didn't know you had to do that. How can I find out which generator I am using? – Shervin Asgari Apr 12 '15 at 08:35
  • I haven't come across a easy way of finding this out, but running `yo` without any params will list the generators you have installed. Hopefully this will help you figure out the one you used. – Chris Gunawardena Apr 13 '15 at 00:25
2

I think that you need to add comments in the index.html to tell grunt where CSS and JS files should be added. Also if you change manually something between these tags, it will be overwriteen on the next restart of grunt (that's what i noticed not sure it's a standard feature)

    <!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

Here is what is generated by angular generator :

<!-- build:js({client,node_modules}) app/vendor.js -->
  <!-- bower:js -->
  <!-- endbower --><% if(filters.socketio) { %>
  <script src="socket.io-client/socket.io.js"></script><% } %>
<!-- endbuild -->

    <!-- build:js({.tmp,client}) app/app.js -->
    <script src="app/app.js"></script>
      <!-- injector:js -->
      <!-- endinjector -->
    <!-- endbuild -->

You need to encapsulate with build tag for grunt (and bower for bower)

Pi Home Server
  • 487
  • 1
  • 3
  • 17
2

the usemin task in your Gruntfile.js will look for 

<!-- build:{{type}}  {{path/fileName}} -->

and 

<!-- endbuild -->

and will concatenate all the files listed between these two into one single file and minify that. this single minified file will be written at the path mentioned by you in {{path/fileName}}

...so if I'm understanding it well then your Gruntfile is perfectly fine and you are probably missing usemin comment blocks in your index.html

put all your link and script tags betweeen usemin blocks

for example for your bower components you can use something like this

<!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/ng-table/ng-table.css">
    <link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
    <link rel="stylesheet" href="bower_components/nya-bootstrap-select/dist/css/nya-bs-select.css">

  <!-- endbower -->
<!-- endbuild -->


<!-- build:js(.) scripts/vendor.js -->
  <!-- bower:js -->

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>

  <!-- endbower -->
<!-- endbuild -->

NOTE: all your bower component css files will go in vendor.css in styles directory i.e. dist/styles/vendor.css and similarly bower component js files will go in vendor.js in scripts directory i.e. dist/scripts/vendor.js

...and for your own js and css files you can use something like this

<!-- build:css(.tmp) styles/main.css -->

  <link rel="stylesheet" href="styles/css1.css">
  <link rel="stylesheet" href="styles/css2.css">

<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/about.js"></script>

<!-- endbuild -->

NOTE: here all your css files will go in main.css in styles directory i.e. dist/styles/main.css and similarly js files will go in main.js in scripts directory i.e. dist/scripts/main.js

...hope it helps :)

panghal0
  • 531
  • 4
  • 10
0

Check if you have set up in you html file. That is what triggers the grunt uglyfy/css min task. Or you can just un-comment these tasks in your grunt config file and make sure they are un-comented in the buttom inside your build task. Good luck

Beckafly
  • 411
  • 2
  • 5