Designing a Simple HTML website with materialize

Hello guys,

I am a beginner in Web Development.

So it all started with the use of html tags and how the browser interprets and translates this markup for us.

I started up with building a small website. Usually when we talk about content websites, the more appealing and user friendly the website is, the more you attract the customers.
So i started up browsing for some good UI libraries.
In my context, i had assumed that materials UI is only supported by angular. But to my surprise, it was not. Here are the 3 options i could find for materials implementation in simple content websites.

1. materializecss
2. bootstrap-material-design
3. getmdl.io

My next worry was, i had to reload the damn thing again and again every time i made some changes either in javascript or html. One of the options that i came accoss is to make use of gulp tasks to automate this whole procedure. This procedure for me involved the following things:

• Auto reload of browser window on some changes in code.
• Minification of my javascript/css files
• Copy my libraries from node_modules to some directory (may be `vendor`)

gulp made all this possible for me with less than 20 lines of code! Isn't that amazing? I mean it reduced my development time to more than 50%.

Guys I love to share what i do, So here is the quick overview on HOW WE CAN BUILD A SIMPLE WEBSITE WITH GULP AUTOMATION:

Summary:

This tutorial will walk you through setting up the project directory structure and also will help you understand the basic concepts of gulp tasks and the power of gulp in automating any development task. Here is the link to github repository

Directory Structure:
+ node_modules
+ src
+ + css
+ + img
+ + js
+ + pages
+ + scss
+ + vendor
+ + index.html
+ gulpfile.js
+ package.json
+ README.md

I hasd to install gulp. gulpfile.js will have all the tasks such as copying vendor libraries like jQuery from node_modues to our source folder, conversion of sccs files to css files, minifications of js and css files, etc. Then i wrote some scripts in my package.json to invoke my gulp tasks.

"scripts": {

"copy": "gulp",

"start": "gulp dev"

}

Such that for example, when i fire npm start,it will invoke the dev task from my gulpfile.

Here is an snippet of dev task from gulpfile

// Dev task with browserSync

gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js'], function() {

gulp.watch('src/scss/*.scss', ['sass']);

gulp.watch('src/css/*.css', ['minify-css']);

gulp.watch('src/js/*.js', ['minify-js']);

// Reloads the browser whenever HTML or JS files change

gulp.watch('src/**/*.html', browserSync.reload);

gulp.watch('src/js/**/*.js', browserSync.reload);

});

Whatever that is specified in the square brackets like
 ['browserSync', 'sass', 'minify-css', 'minify-js']
indicates that these are the prerequisite gulp tasks for the DEV task to start. That means gulp will have to first perform all these tasks one by one and later come to dev task.

gulp.watch(file,task) monitors the specified file for changes and perform the task specified as the second parameter.

browserSync.reload reloads the browser.
gulp.watch('src/**/*.html', browserSync.reload);

This statement means that whenever any html file from src/folder/filename.html changes, reload the page in browser.

So this is how i solved my problem of refreshing the browser,magnification,compilation, etc with easy to use gulp tasks.

Thank you folks !!!