SymfonyCasts stands united with the people of Ukraine
If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.
This all looks fun, until you realize that every time you change your Sass file, you have to run Gulp again. That's not going to work - Gulp needs to run automagically when a file changes.
Well, there's magic to handle this called watch(), and for once, it comes
native with Gulp itself.
But first, let's create a second task, which we can do just by using gulp.task()
like before. Let's move the guts of the default task into this new one:
| ... lines 1 - 4 | |
| gulp.task('sass', function() { | |
| gulp.src('app/Resources/assets/sass/**/*.scss') | |
| .pipe(sourcemaps.init()) | |
| .pipe(sass()) | |
| .pipe(sourcemaps.write('.')) | |
| .pipe(gulp.dest('web/css')); | |
| }); | |
| gulp.task('default', ['sass']); |
Hey! Now we have 2 tasks: sass and default. To prove it, we can run
gulp sass and it does all our good stuff.
For now, when I run the default task, I just want that to run the sass
task. To do this, replace the function callback with an array of task names.
So, ['sass']:
| ... lines 1 - 12 | |
| gulp.task('default', ['sass']); |
And actually, you can still have a callback function - now it would be the third argument. Gulp will run all the "dependent tasks" first, then call your function. Handy!
So if we just run gulp, it runs the sass task first.
We're clearly dangerous, so add a third task called watch. The name of
the task isn't important, but this fancy gulp.watch function is. Copy
the *.scss pattern and pass it to watch(). This tells it to watch for
changes in any of these files. The moment it sees something, we want it
to re-run the sass task. So put that as the second argument:
| ... lines 1 - 12 | |
| gulp.task('watch', function() { | |
| gulp.watch('app/Resources/assets/sass/**/*.scss', ['sass']) | |
| }); | |
| ... lines 16 - 18 |
Isn't that nice? Find your terminal and try out gulp watch. It runs, but
then hangs and waits. Go to the browser and refresh. Things look totally
normal. Now, go into styles.scss. Channel your inner-designer. Let's change
the dinosaur names to be a majestic vermillion.
Back to the browser! Refresh! That's some nice vermillion. In the background,
evil self-aware robots, I mean, the watch function, was doing our job for
us and re-running the sass task. Change that color back to black and refresh.
Instantly back to boring.
But we are starting to have some duplication - I've got the app/Resources/assets/...
path in 2 places. This is just normal JavaScript, so let's create a variable
called config. Hey! I'll even add the equals sign. Let's store some paths
on here, like assetsDir set to app/Resources/assets and sassPattern
set to sass/**/*.scss:
| ... lines 1 - 4 | |
| var config = { | |
| assetsDir: 'app/Resources/assets', | |
| sassPattern: 'sass/**/*.scss' | |
| }; | |
| ... lines 9 - 23 |
Now we can just use these variables - classic programming! So,config.assetsDir,
a / in the middle, then config.sassPattern. Put that in both places:
| ... lines 1 - 9 | |
| gulp.task('sass', function() { | |
| gulp.src(config.assetsDir+'/'+config.sassPattern) | |
| ... lines 12 - 15 | |
| }); | |
| ... line 17 | |
| gulp.task('watch', function() { | |
| gulp.watch(config.assetsDir+'/'+config.sassPattern, ['sass']) | |
| }); | |
| ... lines 21 - 23 |
To stop the watch task, type ctrl+c. I'll run gulp sass to make sure
I didn't break anything. It's happy with the config!
Whenever we start working on a project, we'll want to run the sass task
to initially process things and then watch for future stuff. Hmm, what
if we made the default task do this for us? Add watch to the array:
| ... lines 1 - 21 | |
| gulp.task('default', ['sass', 'watch']); |
Now just run gulp! It runs sass first and then starts watching for changes.
That's really nice.
So when I open my editor and start to code I have first to launch the terminal and run the sass task ?
Is there a way to have this done automatically in PHPStorm ?
Also it's quite anoying to have a terminal window open and stuck running sass. I know I could do > sass & to run it in background but I'm sure there is something better. isn't it ?
Hi there!
I haven't used it before, but there is some integration with Gulp and PhpStorm that you might find interesting! https://www.jetbrains.com/h...
And yes, you could of course run it with &, but obviously it's really the same. With some technologies - I'm not sure about gulp, but webpack has this - they are starting to allow you to run "development" web servers - where your CSS/JS calls actually proxy through a web server and are returned dynamically. This removes the need for a "watch" process. But, these watch processes are still pretty common overall.
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
}
}
If you're working with Gulp 4 it would work
gulp.task('default', gulp.series('sass', function() {
// default task code here
}));
or just without default function
gulp.task('default', gulp.series('sass'));