background preloader


Facebook Twitter

Browsersync + Gulp.js. Building With Gulp. Optimizing your website assets and testing your design across different browsers is certainly not the most fun part of the design process.

Building With Gulp

Luckily, it consists of repetitive tasks that can be automated with the right tools to improve your efficiency. Gulp is a build system that can improve how you develop websites by automating common tasks, such as compiling preprocessed CSS, minifying JavaScript and reloading the browser. In this article, we’ll see how you can use Gulp to change your development workflow, making it faster and more efficient. What Is Gulp? Link Gulp1 is a build system, meaning that you can use it to automate common tasks in the development of a website. Gulp by itself doesn’t really do much, but a huge number of plugins are available, which you can see on the plugins page2 or by searching gulpplugin on npm. Other build tools are available, such as Grunt7 and, more recently, Broccoli8, but I believe Gulp to be superior (see the “Why Gulp?”

Automate Your Tasks Easily with Gulp.js. As developers we often need to look at the tools we use and decide if we are using the right tool for the job.

Automate Your Tasks Easily with Gulp.js

Chris did an awesome write up on Grunt early last year. But maybe Grunt just isn’t right for you. Gulp is a streaming build system, by using node’s streams file manipulation is all done in memory, and a file isn’t written until you tell it to do so. WPGulpTheme. WPGulp. A Tutorial for Getting Started with Gulp · Justin McCandless.

A Beginners Guide to Package Manager Bower and Using Gulp to Manage Components. Package managers like Composer for PHP and NPM for Node have become essential tools for simplifying a developer’s life.

A Beginners Guide to Package Manager Bower and Using Gulp to Manage Components

A package manager is a tool for keeping track of what you’ve installed, as well as installing and upgrading packages. They also check for dependencies and compatibility. Bower is a package manager for the web. The web is built from various frameworks, libraries and plugins. Bower’s job is to make managing these “packages” easy. Let’s Install Bower Bower uses Node, so make sure you’ve installed it before proceeding to install Bower. . $ node -v If you get something like ‘command not found’ you will need to install it.

Now we should be ready to globally install Bower. . $ npm install -g bower If you’re running this from OSX or Linux you will probably need to run this as an administrator so prepend it with sudo. Setup Bower for a Project For each of your projects that you want to use Bower with you will need to initialise it. . $ cd ~/projects/my-project Finding Packages JavaScript. Baby steps with gulp.js. I am working on a little front-end project to learn Backbone.js, and this presentation by Addy Osmani convinced me to invest the time to set up a proper continuous build workflow.

Baby steps with gulp.js

I tried several templates, but they all seemed unnecesarily complicated, dependency heavy, and full of features I don't really need. So I decided to build my own setup from scratch trying to keep things as simple as possible. The goal was to have a build setup with: HTML minification.JavaScript and CSS minification and concatenation.Source map support.Simple client-side dependency installation with Bower.Bootstrap as a less mixin library.BrowserSync support. Any live reload tool would do, but BrowserSync looks cool. The final template is available at Initial setup First I had to install nodejs, which was simple enough to do from the official website. Gulp for Beginners. The following is a guest post by Zell Liew.

Gulp for Beginners

I'm stoked to have Zell dishing out some Gulp 101. Zell has a comprehensive tutorial style (see his post on Susy) that lends itself well to a topic of this scope. I've also tackled Grunt in a similar fashion. I get the sense people found that pretty darn helpful, so here we go again with the equally popular Gulp! Gulp is a tool that helps you out with several tasks when it comes to web development. Spinning up a web serverReloading the browser automatically whenever a file is savedUsing preprocessors like Sass or LESSOptimizing assets like CSS, JavaScript, and images. Advanced Gulp File - Mike Street - Front-end Developer from Brighton. Managing development and production assets with Gulp - Excodus. What is a task-runner?

Managing development and production assets with Gulp - Excodus

In this article I assume that you have basic knowledge about task-runners e.g. Gulp or Grunt. For newbies I'll only explain it briefly - they are tools for performing automated, programmable jobs. For example Semantic-UI framework, which I described earlier has build tools containing tasks for installing, combining, compiling assets. After running one command it creates four distribution files from several source files: GitHub - jairtrejo/simple-gulp-template: A very simple gulpjs template.