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??
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.
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 = require('gulp-connect');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:
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']);
});
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']);
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.