SymfonyCasts stands united with the people of Ukraine
gstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
Hey guys! Yes! In this tutorial, we get to play with Gulp! And that's got me excited for 3 reasons. First, it has an adorable name. Second, it's going to solve real problems - like processing SASS into CSS, minifying files and making you a delicious cup of coffee. Yes, I am lying about the coffee, unless your coffee machine has an API. Then I guess it would be possible. Ok, and third, Gulp is refreshing to work with... and just a lot of fun.
On the surface, Gulp is just a way to make command-line scripts. But its secret ingredient is a huge plugin community that'll give us free tools. The Gulp code you'll write will also be really hipster, since you'll write it all in Node.js. But remember, that just means it's JavaScript that's run on the server like PHP.
The Laravel folks like Gulp so much, they created a tool on top of it called Elixir. If you check out its docs, Elixir lets you process SASS files, LESS files, CoffeeScript, minimize things and other frontend asset stuff. It's really cool.
The problem with Elixir is that, one, it's meant to only work with Laravel. And two, it's a little too magic for my taste. So in this tutorial, we're going to get all the sweetness of Elixir, but build it so that you understand what's going on. Then, you'll be able to bend and make it do whatever you want. Like, make you some coffee.
So let's install our new toy: Gulp! Head to the terminal, and type
sudo npm install -g gulp. The Node Package Manager - or npm - is the Composer
of the Node.js world. If you get a "command not found", go install
Node.js, it comes with npm and it's totally
worth it.
This command will give us a gulp executable. Take this Node executable
for a test-drive by typing gulp -v:
gulp -v
We know that Composer works by reading a composer.json file and downloading
everything into a vendor/ directory. Great news! npm does the same thing.
It reads from a package.json and downloads everything into a node_modules
directory. To get a shiny new package.json type npm init. Hit enter to
get through the questions - they don't matter for us.
And there's the shiny new file I promised. Right now, it's boring:
| { | |
| "name": "gulp-knpu", | |
| "version": "0.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "dependencies": { | |
| }, | |
| "devDependencies": {}, | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "", | |
| "license": "ISC" | |
| } |
But now we can install Node packages into our project. The first, is gulp!
So type, npm install gulp --save-dev. Wait, didn't we already install this?
Well, the original command - with the -g gave us the global gulp executable.
This time we're actually installing gulp into our project so other libraries
can use it. Don't forget the --save-dev part. That says, "download this
into my project AND add an entry into package.json for it."
Great! Flip back to your editor. The package.json has a new devDependencies
section and we have a new node_modules directory with gulp in it:
| { | |
| "name": "gulp-knpu", | |
| "version": "0.0.0", | |
| ... lines 4 - 7 | |
| "devDependencies": { | |
| "gulp": "^3.8.11" | |
| }, | |
| ... lines 11 - 14 | |
| "license": "ISC" | |
| } |
In Composer terms, devDependencies is the require key in composer.json
and node_modules is the vendor/ directory. Ok, we're rocking some Node!
Time to work. Create a new file - gulpfile.js - at the root of your project.
Gulp looks for this. Next, flex your Node skills and say
var gulp = require('gulp');. Below this, we'll define tasks. Let's create
a task called default. The idea is simple. This says, when I execute the
task called default, I want you to execute this function. Use the good
ol' console.log to test things!
| var gulp = require('gulp'); | |
| gulp.task('default', function() { | |
| console.log('GULP THIS!'); | |
| }); |
Guys, these 5 lines are a fully-functional Gulp file. Head back to the command
line and type gulp followed by the name of the task: default:
gulp default
It's alive! We can also just type gulp and get the same thing. The task
called default is... well, the "default" task and runs if you don't include
the name.
Now let's process some SASS files.
Hey Terry,
Yes, we are! But in these screencasts we have a light PhpStorm theme instead of usual dark one which is using in our latest tutorials ;)
Cheers!
// composer.json
{
"require": {
"php": ">=5.3.3",
"symfony/symfony": "2.6.*", // v2.6.4
"doctrine/orm": "~2.2,>=2.2.3", // v2.4.6
"doctrine/doctrine-bundle": "~1.2", // v1.2.0
"twig/extensions": "~1.0", // v1.2.0
"symfony/assetic-bundle": "~2.3", // v2.5.0
"symfony/swiftmailer-bundle": "~2.3", // v2.3.7
"symfony/monolog-bundle": "~2.4", // v2.6.1
"sensio/distribution-bundle": "~3.0", // v3.0.9
"sensio/framework-extra-bundle": "~3.0", // v3.0.3
"incenteev/composer-parameter-handler": "~2.0", // v2.1.0
"hautelook/alice-bundle": "~0.2" // 0.2
},
"require-dev": {
"sensio/generator-bundle": "~2.3" // v2.4.0
}
}
For me it didn't quite worked for the first time. That's maybe because I didn't had nodejs, npm, ruby and sass installed. So, for everyone experiencing the same as me, being on Ubuntu 14.04:
1. Install NodeJS
$ sudo apt-get update
$ sudo apt-get install nodejs
2. Install npm (Node Package Manager)
$ sudo apt-get install npm
3. Install gulp
$ sudo npm install -g gulp
Now create a symbolic link:
$ sudo ln -s /usr/bin/nodejs /usr/bin/node
If you don't know where nodejs is located:
$ which nodejs
Now verify gulp installation:
$ gulp -v
Should look something like this:
[18:15:43] CLI version 3.9.1
4. Install ruby with sass
$ sudo apt-get install ruby-sass