Home → Questions →

Installing gulp dev/build depencies

• Edit

ben

21 Aug, 2017 07:36 AM

I've got a fairly simple angularjs website that is just "built" using gulp tasks (it calls an API that is built and deployed on another project) and the problem I have is that the gulp modules I need are not available unless I install them all globally as part of the install step. This is not necessarily a problem but it feels like I might be doing something wrong/missing something obvious.

I run npm install and it installs all the devDependencie required to run the gulp tasks (just not globally) so I have to then install them one-by-one.

1. 1 Posted by ben on 28 Aug, 2017 11:47 PM

   

   Any thoughts on this appveyor team?

   • Edit

2. Support Staff 2 Posted by Feodor Fitsner on 28 Aug, 2017 11:50 PM

   

   Hi Ben,

   Installing the dependencies every time during the build is the right way to go.

   Additionally, you can try configuring build cache to speed up things: https://www.appveyor.com/docs/build-cache/

   • Edit

3. 3 Posted by ben on 29 Aug, 2017 12:32 AM

   

   Thanks Feodor good to know I'm not being too stupid. I have got caching on but it doesn't seem to work for those packages. My yml has this in it:

   cache:
     - node_modules # local npm modules
     - '%APPDATA%\npm-cache' # npm cache
     - packages -> **\packages.config 
     - C:\ProgramData\chocolatey\bin -> appveyor.yml
     - C:\ProgramData\chocolatey\lib -> appveyor.yml
   

   • Edit

4. 4 Posted by ben on 29 Aug, 2017 12:35 AM

   

   Also I install my npm dependencies but then have to install them one-by-one globally:

   install:
     # install modules
     - npm install 
     - npm install -g bower
     - bower install
     - npm install -g del
     - npm install -g gulp
     - npm install -g gulp-clean-css
     - npm install -g gulp-connect
     - npm install -g gulp-cssmin
     - npm install -g gulp-inject
     - npm install -g gulp-sass
     - npm install -g gulp-uglify
     - npm install -g wiredep  
     - npm install -g gulp-version-number  
     - npm install -g gulp-ng-annotate  
     - gulp build
   

   • Edit

5. 5 Posted by Ilya Finkelshte... on 30 Aug, 2017 12:45 AM

   

   Hi Ben,

   Let us please look at issues one by one. Can you please provide link to specific build where caching does not work and explain what you see as expected results.

   Ilya.

   • Edit

6. 6 Posted by ben on 30 Aug, 2017 12:49 AM

   

   Sorry Ilya I was just thinking and typing at the same time, thanks for all your help.

   I'm not sure if you can see this but my most recent build is:

   https://ci.appveyor.com/project/ben_cvt/cview-responder-v2

   I've attached a copy of the yml file too in case that helps. I'm pretty sure it boils down to my understanding and poor configuration on my part.

   • appveyor.yml 1.22 KB
   • Edit

7. 7 Posted by Ilya Finkelshte... on 30 Aug, 2017 01:07 AM

   

   Yes I can see it. In the beginning of the build you can see something like this
   

   [00:00:12] Cache 'node_modules' - Downloading (41,783,611 bytes)...1%
   ...
   [00:00:12] Cache 'node_modules' - Downloading (41,783,611 bytes)...100%
   [00:00:33] Cache 'node_modules' - Unzipping...
   [00:00:33] Cache 'node_modules' - Restored
   

   for all you cached folders except packages (which probably you do not have as you are not using nuget). This means that cached folders are restored from the cache storage.

   In the end of the build you see something like this:

   [00:03:16] Cache 'node_modules' - Calculating checksum...
   [00:03:16] Cache 'node_modules' - Up to date
   

   which means that cached content did not changed and cache will not be updated.

   What specific behavior is not expected?

   • Edit

8. 8 Posted by ben on 30 Aug, 2017 02:06 AM

   

   OK so I'm guessing everything is actually working fine. It's just that the npm install commands seemed as if they were downloading and installing again (maybe I've got that wrong).

   • Edit

9. 9 Posted by Ilya Finkelshte... on 30 Aug, 2017 11:14 PM

   

   Please try to cache %AppData%\npm\node_modules to get globally installed modules cached.

   • Edit

10. 10 Posted by ben on 14 Nov, 2017 03:04 AM

    

    So I wanted to come back to this now after making a big discovery and reducing my build down to a matter of seconds instead of minutes and I think I poorly articulated my issue before...

    It seems obvious now but my problem was I was running the global gulp and then had to install ALL of my dependencies globally one-by-one. This is far from ideal and I knew it wasn't right but at the time it was working.

    Then today I decided to come back to the issue as I'm fixing other house keeping issues and found this gem of a blog post:

    https://www.sitepoint.com/solve-global-npm-module-dependency-problem/

    So by adding the following to my packages.json

      "scripts": {
        "gulp": "gulp"
      },
    

    Then I have the following in my YAML:

    install:
      # install modules
      - npm install 
      - npm run gulp -- build-release
    

    And it works a charm. All my dependencies get installed and then my build task called 'build-release' runs using all of the dev dependencies in my packages.json.

    And as an added bonus my node_modules cache is now working as I use the local node_modules folder and not the global one.

    • Edit

11. ben closed this discussion on 14 Nov, 2017 03:28 AM.

12. ben re-opened this discussion on 14 Nov, 2017 03:28 AM

13. Ilya Finkelshteyn closed this discussion on 25 Aug, 2018 02:21 AM.