Gulp Program Tutorial

As, we sometimes find ourselves repeating the same tedious tasks again and again. If you consider how much time is wasted by running a build command or hitting refresh on your browser, you will realize that you can be saving a lot of time. Additionally, by automating your processes, you can stay focused on the task at hand instead of temporarily leaving “the zone” (your state of productivity). In this JavaScript automation tutorial, you will learn how to automate your and development process with Gulp.

If you are more, I encourage you to overcome any fears you have and to read on. On the other hand, if you are a developer you will be able to sweep right through this once you understand the logic behind it. Is a build system that employs Node.js’s streams to implement an asynchronous source-destination approach to automation. Everything is written in JavaScript, so it is easy for anyone with intermediate coding knowledge to get started. A Gulp build process consists of a collection of watchers and tasks. Additionally, the community behind Gulp maintains a within npm which helps accomplish any task from concatenating JavaScript to creating icon fonts from SVGs.

Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without. Gulp tutorials for beginners and advanced users. Sign in now to see your channels and recommendations!

Alternatives to Gulp There are plenty of alternatives out there, most of which have spawned in the past couple of years - the most notable one being. The contest between Gulp and Grunt will never have a clear winner, since they both have their pros and cons, hence I will avoid delving deep into that. In a nutshell, Grunt’s heavy reliance on config is what steers people towards Gulp’s JavaScript approach. In the meantime, native GUI implementations such as have gained some ground, mostly from people that withhold getting into coding. However, with the bundled applications it’s impossible to reach the level of customizability and extendability that Gulp offers. Process Automation Fundamentals Plugins Plugins are the means through which gulp accomplishes each process. Plugins are installed through npm and initiated using “require”.

Tasks For Gulp, tasks always have a source and a destination. In between them lie the pipes that call each plugin and output the transmuted results to the next pipe. Globs Globs are wildcard patterns that refer to files. Globs or arrays of globs are used as inputs in task source. Watchers The watchers watch the source files for changes and call tasks whenever a change is detected. Gulpfile.js This is the JavaScript file that the “gulp” command points. It contains everything from the tasks to the watchers or other pieces of code used by tasks.

A Straightforward Task To get started, you need and a command line shell with administrator access. You can from here. Once installed, you can run the following command to ensure that npm is up to date. Sudo npm install npm -g The -g flag states that the installation will be global. Now you are ready to install Gulp and start calling some simple tasks.

Use the following command to install Gulp globally. Sudo npm install gulp -g Note that you can also use the same command to update.

You can download the starter kit that will help you with your first task from. It includes a very simple task that compiles SCSS files to CSS. It is using the gulp-sass plugin, which employs. I have chosen libsass here because it is way faster than the Ruby alternative, although it. Once in the root directory of your project, you can use the following command to install all the plugins required. Npm install This command reads the package.json file and installs all the dependencies required. We are using “npm install” here as a shorthand for the following: npm install gulp --save-dev npm install gulp-sass --save-dev The “–save-dev” flag adds the selected plugins to the package.json devDependencies so that the next time you want to install everything, you can use the handy “npm install”.

At this point you can run your first task. Run the following command and watch as all the SCSS files in the /scss folder are compiled into CSS in the corresponding directory: gulp scss Note that in this example we are specifying the task to be run. If we omitted the task name, the one named “default” would be run. Code Walkthrough The above is accomplished in only 7 lines of JavaScript code. Surely, you will feel at home once you grasp the simplicity of it: var gulp = require('gulp'); var scss = require('gulp-sass'); In the beginning we initialize all the plugins that we will be using.

Gulp is the only one we can’t do without: gulp.task('scss', function() { We define the task named “scss”: return gulp.src('scss/*.scss') Set the source files for the task. These are defined as globs. In this example we are referring to all the files in the “scss/” folder that end in “.scss”..pipe(scss()) At this point, we call the gulp-sass plugin which we previously defined:.pipe(gulp.dest('css')); Finally, we use “gulp.dest” to define the destination folder for our files. This could also be a single file name if the files where concatenated. To further improve this process automation implementation, you may try to include a few other Gulp plugins.

For instance, you may want to minify the final product of your task using and automatically add vendor prefixes with. Employing a Watcher I have created a watcher starter kit that you can use straight away. You can download it from. It includes an enhanced version of the previously created SCSS task, and a watcher that watches the source files and calls the task. In order to start it, use the following command: gulp This command starts the “default” task which initiates the watcher. At this point you can edit any of the SCSS files and watch as the CSS files get recompiled. You will be able to see Gulp’s notifications in the command line.

Code Walkthrough We have set up a watcher for our task with only 3 extra lines of code. That said, the watcher starter kit does not differ much from the introductory example.

In this section, we will go through all the additions and alterations. Return gulp.src(['scss/**/*.scss', '!scss/**/_*']) In this example, Gulp source is provided with an array of globs. The first one includes all the files that end in “. Evangelion Episode 24 Download Raw Manhwa. scss” also in subfolders, and the second one excludes the ones that start with “_”. This way we can use SCSS’s built-in function @import to concatenate the _page.scss file.

Gulp.task('default', ['scss'], function() { Here we define the “default” task. The “scss” task is run as a dependency before “default”. Gulp.watch('scss/**/*.scss', ['scss']); Finally, we call Gulp’s watch function to point at any file ending with “.scss” and whenever a change event occurs, to run the “scss” task. Now you are ready to create new watchers for other automated processes such as JavaScript concatenation, code hinting, CoffeeScript compilation, or anything that else that might come in mind. To delve deeper into this JavaScript automation implementation, I propose adding which will notify you when a task is run. Also, you can create a separate task to minify the resulting CSS code and make the “scss” task run as a dependency to that. Finally, you can use to add the “.min” suffix to the resulting files.

Advanced Gulp Plugins for JavaScript Automation There exist thousands of plugins in Gulp’s plugin base, some of which go far beyond simple JavaScript automation of a build process. Here are a few outstanding examples: BrowserSync injects CSS, JavaScript and automatically refreshes the browser whenever a change is made. Additionally, it contains a ghostMode feature which can be used to scare your colleagues or to greatly speed up your browser testing. Browserify analyzes the “require” calls in your application and converts it to a bundled JavaScript file.

Also, there is a list of npm packages that can be converted into browser code. Webpack Similar to Browserify, aims to convert modules with dependencies to static files. This one gives more freedom to the user as to how the module dependencies will be set, and does not aim to follow Node.js’s code style. Karma brings the infamous testing environment to Gulp.

Karma follows the least configuration approach that Gulp also endorses. Conclusion In this process automation tutorial I have demonstrated the beauty and simplicity of using Gulp as a build tool. By following the steps described in the tutorial you will now be ready to fully automate your software development process both in your future and your legacy projects. Investing some time into setting up a build system for your older projects will certainly save you precious time in the future. Stay tuned for a more advanced Gulp tutorial coming soon.

Tutorial Overview • • • • • • • • • • • • • • • • What to expect from this Tutorial This is the first part in a series of articles where I describe my whole development and build process step-by-step from start to finish. I am sick of all these Hello World tutorials spreading around the Internet, describing just the basics and don’t show a whole process, go deeper or share things learned during the process. I’ll describe everything step-by-step and provide specific version numbers for modules, to make sure you’ll have no problem in getting it running on your computer. Whenever you have problems feel free to compare your code to the finished.

Each tutorial builds on the stuff done before, so if you need some specific thing better look at the final code base. You’ll learn how I created my complete development and build process, which I use on this website and my. Both websites sources can be found on my. It’s the first series of articles I write in English, which is not my native language. So if you find some spelling mistakes or false grammar, just send me a message. When I started with Gulp.js, I fortunately stumbled upon a GitHub project called gulp-starter, that helped me a lot to structure my code and understand Gulp.js.

So my process is partly derived from this fantastic project. What is Gulp.js? Gulp.js is the streaming build system and its main focus is speed, efficiency and simplicity. Where Grunt.js uses a lot of configuration with the actual process hidden in plugins, Gulp.js uses a simple and minimal API. You code your own build process by yourself and use JavaScript as the language. Of course you don’t have to program everything by yourself, there are nearly 800 plugins ready for Gulp.js. But even more Node.js modules can be used to build the perfect build and development process for your needs.

Why do I want this at all? As a front-end developer or web designer you will most likely need a lot of things to build a modern website: a development server, a preprocessor for your, or files, some automation to bundle your JavaScript, tools to optimize your code, to compress, compile or move things around. And if you change something, you want your files to update automatically, refresh the browser and so on. You don’t want to do this by hand, do you? It’s 2014 and we don’t copy our files per drag-and-drop on a server via a FTP program, reload our browser by hitting continuously F5 or crunch our images for a smaller file size by hand. Node.js Gulp and all plugins are written in JavaScript and use the Node.js® platform.

You don’t have to know Node.js (but it will help a lot), but basic JavaScript skills are required to follow along. To start with my tutorial you need to install Node.js on your computer.

This can be done by installing the package on the. Advanced users may install Node.js with their favorite package installer (Homebrew etc.). Gulpfile As with Grunt.js, all you need to start is a main file. In Gulp.js this file is called gulpfile.js. The first thing I learned from gulp-starter was to write my project in small parts and don’t use a large monolithic file with everything in it. This way I can easily share my Gulp.js files with other projects or just pass individual tasks around. So my base gulpfile.js is very short.