So, the pipe() method reads the stream from the gulp.src(), execute the plugin task and passes it to destination stream via st() to write it to destination. the gulp.src() method reads files as Stream from source and pass it to a gulp plugin through pipe() method for doing a task. There is another method called readable.pipe() which actually chains the above gulp methods to perform a task. Watches or monitors the specified source and calls a task when there is any change occurred in the source. Writes the processed files into the specified destination folder There are primarily 4 methods exposed by Gulp to build tasks. Return gulp.src(folder.src + 'html/**/*')īefore understanding the above code, let's understand the gulp api we will use to create tasks. Var gulp = require('gulp'), htmlclean = require('gulp-htmlclean') The gulp task for cleaning the files and moving to destination is below. First, lets create a new javascript file called gulpfile.js under the app root. The Gulp tool requires all the tasks to be written a javascript file called gulpfile.js. We will now create gulp tasks to clean these files and move it to destination folder called build under the root. Under application root folder, we will have our uncleaned html files in src folder. The plugin to use for this task is gulp-htmlclean and the command to install is, We will now get a gulp plugin that helps us to remove the white space in html files. So, we now have all the basic setup done to use a local installation of Gulp in our application. The –save-dev switch will save Gulp as a development dependency in package.json. This will download and install gulp locally into a folder called node_modules under the root folder. By having a local installation of Gulp, when the app is got latest from version control it will configure the app with all its dependencies locally instead of using a global installations. The package.json for npm is similar to nfig used by Nuget to store the application dependencies. "test": "echo \"Error: no test specified\" & exit 1" You can equate this step to having a nfig file for storing nuget package dependency in visual studio projects. This file will store the npm package dependencies for the application. This will ask series of basic questions about the application and finally create a package.json file under the application root folder. Type the npm init command and press enter to create package.json file. This is because, Gulp is installed by using npm. To do this, reach the application folder in the command prompt and configure the application to use npm package manager. Instead of using globally installed Gulp, we will install a local version of gulp into the application folder and use it. Assume our application reside under a folder C:\QuickStart\GulpDemo. Finally, we will use gulp to copy the resultant files into a build folder. Let’s try to use gulp to automate 2 simple tasks, removing white spaces from html files and minifying JavaScript files. Refer below,Īfter installation, verify the Gulp installation and version, This will download and install Gulp globally in the machine. To install Gulp machine wide (globally), open command prompt and type the below command and enter. This command will output the version of the respective installation similar to below. Installing Node.js will also install npm package manager.Īfter installation, you can verify the installation by executing node -v and npm –v commands in command prompt. As a prerequisite, Gulp requires Node.js installed first. Gulp can be installed by using npm (Node Package Manager) tool either machine wide or locally to the application. The gulp tasks are writted in javascript file called gulpfile.js which will be executed by Gulp tool. There are currenlty more than 3000+ plugins available here which makes almost every possible tasks we can think of can be automated. Gulp is built upon Node.js and it already has a strong community that builds various plugins for performing various tasks. So, in simple terms Gulp is a task runner tool while tools like Bower, npm are package managers. These are tasks like bundling and minifying scripts and style sheets, compiling less or sass to css styles, deploying files to servers, image compressing, etc.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |