GULP


Gult is a build system or a build tool, this meas it will help us to automate things.

To install: there are two stages 01- Install Globally & 02- Install in local Project.

01- Installing Glup globally:

and to make sure is install check with:

02- Install Gulp Locally:

cd (to you project folder), there we want to add the Gulp to the “package.jason” file, to do that.

now open the “package.jason” file with a text editor and you will find out that a new area name “devDependencies” is created.

and just to make sure that the installation was completed, on your the terminal type: “gulp” and you should get the following error: “No gulpfile found”

now let use it.

In order to to be able to use Gulp, we need to create a .js file on the root directory of our project.  so: “cd ~(to your project)” and there you can create the file in the command line with:

now lest open this file so we can write on it:

01- Before we star coding, we should Import or Require the “Gulp Package” that we install a little ago. by typing on the “gulpfile.js” file:

save the file an now in the Terminal type:  “gulp”  and we should get the error “Task ‘default’ is not in your gulpfile” plus some other lines. this is OK now on the“gulpfile.js” file we need to write:

now save the file an in the Terminal run the command “gulp”

and now you can see that the task was successfully run, with the following result.

now lest practice creating another task

to run the default “gulp task” you only need to type in the terminal: gulp

but if you want to be more specific in what task you want to run you can type “gulp” space (and the name of the task like) “html”:

and now you can see that the task was successfully run, with the following result.

Now let me break the bad news, Gulp by it self is not very useful but if you want to make some great things we can use “GULP PLUG-IN’S”. so now lest see one Plug-In name “gulp-watch” and is the plug-in that makes automation possible, this plug in watch files on the computer and wen it detects that some changes have been made, it can trigger a “Gulp Task” in response.

so now lest install this plug in and add it to the our file “package.json”, now go to the in the Terminal:

once is completed we need to go to our .js file  “gulpfile.js” and add it in another variable,  I will add the code on the existing file so you see what I’m doing

we just create the task: “watch”  now lest run it on the Terminal

you will notice it not finish, because our faithful robot do not stop working, until we say so, but for now is keeping watch on the “index.html” file so lets open it on Sublime text and make a small change like add a extra space, save it, when you save it, ath the same time the task “watch” is activating the fiction programmed and  you will notice that in the TERMINAL, you can see the execution of that Function.

to tell gulp to stop watching in the command line type: “CTRL + C”

now lest create another that if ANY file in our css “styles” directory is changed it will trigger a task.

now it the Terminal start the gulp-task “styles”

now if we run the task gulp watch again:

and the same will happen if we create other .css files and change therm.


GULP & PostCSS

(lecture 10) – To create the code that we desire, we need to have a task that watch for changes on the CSS and copy those same thing using “.pipe()”  to do this we need to update one task in the gulp.js file to the following:

but copy the content of the file “styles.css” to another file is not our goal we want to modify the content from “.src()” to “.dest()” using pipe().

Before we can do that we need to use”NPM” to install “PostCSS” in the command line (inside of the working directory):

once that is completed, we can go to the file: “package.json” and see that the line””gulp-postcss”: “^6.3.0″,” has bee add to the “devDependencies”, more important now we can use PostCSS in our “gulp.js” file

so at the very top of the “gulp.js” file we nee to add the request for postcss, so now the top in the request area should be like.

now we need to add a plug-in to post-css, this plug in is “auto-prefixer” using “npm” in the Terminal.

now request the new package “autoprefixer ” in the “gulp.js” file


Addig support for Variables in the mani CSS file.

Go to the Terminal and install the simple-vars package

once completed we need to require that packagein our “gulp.js” file:


Now les continue editing our “glupfile.js” we nee to update the line were we call the “autoprefixer”

then in the terminal run the “gulpfile.js” then make a small change on the main css file, save it, and see how now the variable in the temporary css is in a acceptable format like: color: #2f5572, now you get the Idea that we can add as many “post-css” features as we want, so lets add one more.


Addig support for Nested CSS:

In the terminal install nested css:

once completed we need to require that packagein our “gulp.js” file:

Now les continue editing our “glupfile.js” we nee to update the line were we call the “autoprefixer”, again. (this time we add the word “nested”)

and time to run the “gulpfile.js” in the terminal to see how it affects the temporary css.

 

 

s

 

 

 

X



Copyright 2017. All rights reserved.

Posted February 2, 2017 by Edmundo in category "Node