Grunt / Gulp: how do I make it work, is there a good resourc

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Grunt / Gulp: how do I make it work, is there a good resourc

Post by simonmlewis »

I am told I need to be using Grunt or Gulp to reduce my code 'space' wastage.
I've never used it so need to learn.

The way I understand it, you, have a development side that displays it in the readable format, and then one of the two options "crushes" it down to reduce every white unnecessary character, thus speeding it up and reducing load time and file size.

Is this correct?

Which is best, and easier to operate and where do I start?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by Celauran »

I think our front end guys at work use Gulp now. We've used both at some point. Here's an article presenting one v. the other:
https://medium.com/@preslavrachev/gulp- ... d3b398edc4 and here's a "Getting Started with Gulp":
https://travismaynard.com/writing/getti ... -with-gulp

They're task runners, so you can certainly do more with them than just minify files, which you could do many other ways as well.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by simonmlewis »

Ok I am using that second one now to learn it from scratch.
I've gone into cmd and installed it.
But now after entering:
[text]npm init[/text]
into the correct directory, I get this info on package.json file, and this:

Name: <sitename>

So what is this bit about?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by simonmlewis »

So I have installed node, and trying to install Gulp, but I get this error. See attached image with clients details blurred out for privacy reasons.
Attachments
gulp2.png
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by Celauran »

Sudo is a *nix command for privilege escalation (ie. it runs the following command as root) and does not exist on Windows. Try the same command without sudo.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by simonmlewis »

I've got it installed, but it's asking get to add some code to;
[text]Open your gulpfile.js configuration file in a text editor and add the following JavaScript code:
1
2
3
4
5
6
7
8
9
10
11
12

// include gulp
var gulp = require('gulp');

// include plug-ins
var jshint = require('gulp-jshint');

// JS hint task
gulp.task('jshint', function() {
gulp.src('./src/scripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});[/text]

There is no file there. A friend said to just create the file, but does it go in xampp, xampp/phpmyadmin, or somewhere else?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by Celauran »

That would go in your project root, and you'd want to adjust the path to the JS files as needed.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by simonmlewis »

Maybe I installed it wrong.
http://www.sitepoint.com/introduction-gulp-js/

This is what I am using. I wasn't sure what goes in xampp, and wht goes in phpmyadmin... so I can use Gulp on others. Or if I have to install it fresh in every project.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by Celauran »

Your Gulpfile is just like a Vagrantfile or composer.json or .htaccess whatever. It's project-specific configuration, not the tool itself.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by simonmlewis »

Thanks. Still none the wiser of where to install these things. I think it said you install it in the top end, so in phpmyadmin.
And I guess you then perhaps have a gulp file 'per project'?? With that code it in. I'm learning this every step of the way.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by Celauran »

npm should have handled installing gulp itself, so the gulpfile.js should be all you need to add. These go in the project root.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by simonmlewis »

Yes NPM was installed, but I don't know if I installed it in the right place.
ie. if it goes in xampp/, or /xampp/phpmyadmin.

And then where does gulpfile.js get saved. I'm assuming that goes in the folder within phpmyadmin for each web site that uses it?

So I make a file called gulpfile.js and pop that code in.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by Celauran »

simonmlewis wrote:And then where does gulpfile.js get saved. I'm assuming that goes in the folder within phpmyadmin for each web site that uses it?

So I make a file called gulpfile.js and pop that code in.
Yes.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by simonmlewis »

ok so I have this file:

Code: Select all

// include gulp
var gulp = require('gulp'); 
 
// include plug-ins
var jshint = require('gulp-jshint');
 
// JS hint task
gulp.task('jshint', function() {
  gulp.src('./src/scripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});
And I need to set the code to point to the root folder in phyadmin node-modules etc... yes?
I think this is where I am comfused. Because if I do that, then how will I get this to work in a live environment. Or is this PURELY for local purposes.

You don't use this in a live enviromment do you. It's to trim down everything before uploading the new files.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Grunt / Gulp: how do I make it work, is there a good res

Post by simonmlewis »

Let’s be a little more adventurous. We’ll look for new or changed image files in src/images, compress them and output to build/images. For this, we’ll need to install the gulp-changed and gulp-imagemin plug-ins:
I don't get this. So it looks for changes in images. Why does it look in src/images? Do I need to alter any of this?

I guess I am still pretty damn clueless.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply