Sometimes we find ourselves repeating the same tasks many times. You can save a lot of time by automating builds and live reloading the browser page every time you do a modification to the code. This article will help you setup a front end web application with NPM and Gulp. We will use Materialize CSS to create a material design web page & automate all the tasks.
Without doing further ado, Lets get started.
Below is the project folder structure we are going to use throughout the application. I am using Visual Studio Code to edit files in this case.
app – this is the root folder under which we will keep our real code and serve the html pages. Copy this folder to host this project on an web server
assets – Images and other static assets.
sass – This is where you write the styles using sass, Learn more about SASS here.
styles – All the sass is compiles into normal plain css and copied to this directory.
Setting up NPM
Lets create a project folder and start up terminal with the folder location. Once the terminal is open type below command to initialize a NPM project.
$ npm init
Awesome, Once the package is initialized. Make sure we have the above folder structure ready. Once it is ready we can go ahead and start installing other stuff.
$ npm install --save -dev gulp
As we talked earlier, this is required to create tasks and execute them. In this case we are only installing for the development environment.
$ npm install --save -dev browser-sync
$ npm install --save materialize-css
Materialize is a modern responsive CSS framework based on Material Design by Google.
Writing Gulp Tasks
To start writing gulp tasks we have to create a gulpfile.js file in the project root folder. This file will be responsible for the all the gulp tasks.
TASK 1 : Copy Materialize css classes from the node modules to Styles folder.
We write our gulp tasks with the gulp.task keyword followed by the task name and a function parameter where we write the task script.
Remember when we installed materialize using NPM ? Well by default all the NPM install goes to node_modules by default. But in this case we need the Materialize css framework in our app directory, so we will write a task which will copy the css from node_modules to styles folder in app directory. We can easily do with with gulp.src keyword.
TASK 3 : Convert SCSS to CSS and Copy them to Styles folder.
Remember we have a SASS folder in our project. By default i have created a file called main.scss which will contain all our style. But we need to convert it to css and then give it to browser to render. Hmm, writing a task to convert the sass to css will so much make sense. Lets do it.
We will start by installing.
$ gulp-sass $ gulp-autoprefixer
gulp-sass is a gulp extension package which helps to convert sass to css.
After it is installed we can start writing the gulp task.
TASK 4 : Build and Serve
Finally, The last step.
In this step we hook the browsersync with the gulp build process. Meaning every time we build the project browsersync takes the app folder and serves it in the browser.
We have also created few watch on couple of files such as the css, scss and html files. Whenever the files under watch are modified the page reloads automatically with the current changes.
Running the Project.
Done. Now for testing we will create a index.html file in the root of app folder. You can use the below template for testing.
Cool, now that we are done with everything start the project by typing the below command. You can also edit the page while the page is running, make make sure you hit the save button 🙂
Are we done ?
There is more to what he have seen so far, below are few links you can refer to do more.