CODEWITHSUNDEEP
javascriptgulpbuild-system
Gavin Wood
Gavin Wood

Reputation: 1004

Right Way of creating a front end dev build system

Not sure if this is the right place to ask this, so please bear with me.

I'm quite new to build systems/ front end workflow and have relied heavily on IDE built in systems to do the work for me such as compiling Sass to css.

I recently discovered the world of npm gulp and now need to get a project working and compiled from a "dev" folder to a "build" folder.

  1. What im not understanding is if a install bootstrap via npm it adds in to the node_modules folder outside of these two folders. Am I doing something wrong here? because I cd into the dev folder but yet it installed it in the root folder.
  2. how do I change my tag rev files from my dev to build if I have to get files from the node_modules
  3. The same goes for Angular, it is installed in the node_modules folder. how do I go about accessing the code from there to my dev folder and then compiling it to my build.

Upvotes: 1

Views: 515

Answers (3)

M1lls
M1lls

Reputation: 573

I would set it up this way, use the app folder for development purposes, while the dist (as in "distribution") folder is used to contain optimized files for the production site.

Since app is used for development purposes, all your code will be placed in app and will compile in the dist folder when you run something like gulp build

  |- app/
    |- css/
    |- fonts/
    |- images/ 
    |- index.html
    |- js/ 
    |- scss/
  |- dist/
  |- gulpfile.js
  |- node_modules/
  |- package.json

Upvotes: 0

snorkpete
snorkpete

Reputation: 14564

For most front-end build systems, your node_modules folder actually sits at the root of your project folder. Your dev folder (i.e. where you put your source code) which is a sub-folder of your project root, will then be able to see npm modules installed into the project root folder.

Note that in many front-end setups I've seen, the convention is to call that dev folder src instead.

Upvotes: 0

Thiago Barcala
Thiago Barcala

Reputation: 7333

This works with the way node resolve modules. If you install a module like gulp, you will have a structure similar to this:

- node_modules/
    - gulp/
        ...
- src/
    index.js
gulpfile.js

In order to import gulp into your script, you can just use require('gulp') (or import gulp from 'gulp' if you are using EcmaScript6) and node will find out where to look for this module.

You can do it both from the gulpfile.js or from src/index.js. Node will try to find the node_modules folder in the script folder, or in any parent folder.

Upvotes: 1

Related Questions