Create Our Own CSS Frameworks part-2

What Will I Learn?

• Minified Html
• Make task livereload
• Make task watch
• Make default task

Requirements

• Intermediate HTML and CSS
• Basic Javascript
• Watch tutorial part-1 here.

Difficulty

• Intermediate

Tutorial Contents

Minify Html

In the previous tutorial, we have learned how to create tasks in Gulp with the task() method. You can see the tutorial here .

Why do we need minifying??

• Keep performance: In web applications, the smaller the size of the application the faster the compilation process, so we need minifying, especially when we want to create a project that will grow.
• Keep clean: When we minify, we will create a new file from the results of the minification. That means the code during the development process does not mix with the code that we will actually use in production. so the compiled file is a file that is really ready for the production stage

Make Task to Minified Html

We can create tasks with the task() method and with the parameters of the task name and function.

Example :

gulp.task('nameOfTask',function(){
    //Your function here
    });

Implement code to minified HTML.

gulp.task('html',function(){
        gulp.src('index.html')
            .pipe(connect.reload());
    });

• gulp: gulp is the variable we define in var gulp = require('gulp'), in the previous tutorial.

• src(): This function is used to access files or folders that we want, we can put the file directory with 'namedirectory'. In this task, the file to be minified is index.html.

• .pipe(): We combine the function src() with reload(), so if there is a change in index.html then the application will be loaded automatically.

Make Server Livereload

We can make a connection with the server by using server() method, the method provided in the package 'gulp-connect'.

Implement code :

gulp.task('connect', function(){
        connect.server({
            livereload:true
        })
    });

• 'connect': This the name of task Gulp, keep its name relevant to its job.
• connect: This is variable that have been declared in connect = require('gulp-connect');
• server(): This function is useful for making connections, the function parameter as a object {} and key to make live reload is livereload and its value boolean (true or false).

Make Task Watch

We will create a task that serves to watch if there is a file changed. We can use watch(), from package 'gulp'. watch() has two parameters separated by commas, here is the explanation:

• First Parameter: The first parameter is the directory the file you want to watch. The type is 'string'.
• Second Parameter: The second parameter is the name of the task that will be run when a change occurs in the file directory as the first parameter. type is an array[], you can run more than one task, ['task1', 'task2'].

Example :

gulp.task('nameOfTask', function(){
        gulp.watch('fileToWatch', ['TaskToRun']);
    });

Implement the code:

gulp.task('watch', function(){
        gulp.watch('assets-dev/css/**/*',['styles']);
        gulp.watch('index.html',['html']);
    });

• 'watch': This the name of task Gulp, keep its name relevant to its job.
• watch(): This function is useful for watching files and assets-dev / css / ** /* is the directory of files to be watched. then ['styles'] is the name of the task that will be executed if there is a change.

Make default task

We will create a task that will run automatically when gulp is run. We can use the 'default' task name.If usually after the task name, the parameter is a function(). But to create the default task, the parameters we create are the names of tasks that will be run.

Implement the code:
gulp.task('default',['styles','html','connect','watch']);

• 'default': This is the name of default task.
• ['styles','html','connect','watch']: These are the names of the tasks that we will run as default. type is a** string** but inside an array[],

We have made preparations to create a css framework, we have learned to make the required tasks in gulp.js. the next tutorial I will start to create a grid in the frameworks.

Curiculum

• CSS Frameworks part-1

---

Posted on Utopian.io - Rewarding Open Source Contributors

---