Util development configuration that includes CSS styles pre-compiler and scripts minification, also with LiveReload feature for real time browser reload.
Install Node JS, we'll use Node Package Manager (npm) from it to download all packages.
In your terminal type node -v.
The current installed version should be displayed.
We can repeat this step for NPM typing npm -v.
After installing npm, use the command npm install -g gulp to install globally Gulp, our development workflow tool.
With gulp installed globally you can use gulp commands in any of your projects
In order to synchronize your code saving with your browser reload, don't forget to add the Livereload extension to your browser.
- Click here to download the configuration files directly from this repo.
- Copy/move package.json and gulpfile.js files to your project root directory.
- Create
/srcfolder with same folder structure as described below. - In terminal, access your project folder and use the command
npm installto download all dev dependencies listed in package.json. - Initialize gulp task using the command
gulp watchin your terminal. - To active Livereload in your browser, open your project file in browser and click once on livereload extension icon in right top of your browser.
- Happy coding !
In this configuration there is a pre-set /src folder structure as follows:
/root
gulpfile.js
package.json
/src
/js
/scss
/images
/fonts
After running the "build" task, automatically the /dist folder will be created right in your /root, following the same /src structure (except for /scss that we'll keep only locally and send only /css compiled files for any deployment).
Feel free to rename or update the folder structure, don't forget to update the directory reference in gulpfile.js.