The bulk of the work you would need in a development workflow lies in the vast plug-ins created for Gulp. Gulp by itself only provides the basis needed for task automation. pipe method is a default method in Node.js, not to delve deeper into this particular subject, view it as a means to copy files from one directory to another. The backbone of using Gulp at all lies in the interaction between gulp.src and st with the. st - sets the destination folder where files will be placed.gulp.src - sets the source folder where files are located.gulp.task - defines a new task giving it a name, an array of dependencies and a callback function, which will be called when the task is run. ![]() There are three main commands Gulp provides: You’re now ready to get started with writing tasks. The more technical explanation would be that Gulp has now been added to the PATH. This step is important as it is required for Gulp to be visible in your command line regardless of which directory you are in. You’ve now installed Gulp globally on your machine. Note: Linux and Mac users will most likely need to run this command with sudo, to enable the required permissions. Not to worry, head over to Node’s official site to get started.ĭownload | Node.js_Download the Node.js source code or a pre-built installer for your platform, and start developing today._Īll done? Now you’re set to install the necessary tool regarding the actual task automation. If not, you do not have Node installed on your machine. The version number of Node you have installed will be shown as output on the command line. To check if you do, open up a command prompt and type node -v. Sorry, but you have to scroll to the bottom. :)įirst of all, you will need to have Node installed on your machine. The code you will be writing during this tutorial is on GitHub and will be linked at the bottom of the article.Delete tmp and dist before pushing to GitHub.Satisfied with your code? Go ahead and ‘build’ the production files and place them in the dist directory.While the server is running you ‘watch’ for changes, and enable live reloading on the local development server.When the files have been copied and injected it’s time to run a development server on the tmp folder.This is done with an ‘inject’ task and is called injecting dependencies. After all files have been copied you want to reference them automatically in your main index.html.This will let you copy all the files with one command. Combine the HTML, CSS and JavaScript tasks into one main ‘copy’ task.Create separate tasks for pipeing HTML, CSS and JavaScript files from src to tmp.The src folder for pre-processed files, tmp for the local development server and dist for processed and minified files. Have a logical folder structure, with three main folders.pipeing is freaking awesome! The pipe() method is built into Node.js and is used to copy files from one folder to another.Three main Gulp commands: gulp.task, gulp.src, st. ![]() You can severely hurt my feelings by only reading this TLDR or be awesome instead, and read the whole article. It’s perfectly fine if you don’t know any of the terms above, we’ll go through them in more detail a bit further down. In this process making it ready for shipping to production. All with the sole goal of getting your code base’s footprint down to the absolute minimum. Gulp also enables you to compile, minify and concatenate any files you want. This includes moving files around your project directory, and more importantly placing them in a development directory where you will be running a web server. The one I hold as the most important is the way it can simulate the server environment where you will ultimately be hosting your code. There are several key features regarding the use of Gulp which would make you want to use it. The hero you need, and most definitely deserve. Gulp.js_By preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like…_ Blowing up the Death Star. So why Gulp? Because you’re writing the tasks with your best buddy, plain old JavaScript. Once you get the hang of it, you’ll never want to write code without it. ![]() Writing scripts to continuously handle the time-consuming tasks you actually need in your development workflow. Have you ever been tired of hitting the F5 key once too often? Yeah, I understand the pain.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |