Grunt / Gulp: how do I make it work, is there a good resourc
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
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?
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.
All the best from the United Kingdom.
Re: Grunt / Gulp: how do I make it work, is there a good res
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.
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
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?
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.
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
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Grunt / Gulp: how do I make it work, is there a good res
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
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?
[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.
All the best from the United Kingdom.
Re: Grunt / Gulp: how do I make it work, is there a good res
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
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.
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.
All the best from the United Kingdom.
Re: Grunt / Gulp: how do I make it work, is there a good res
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
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.
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.
All the best from the United Kingdom.
Re: Grunt / Gulp: how do I make it work, is there a good res
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
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.
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.
All the best from the United Kingdom.
Re: Grunt / Gulp: how do I make it work, is there a good res
Yes.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.
-
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
ok so I have this file:
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.
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'));
});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.
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
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?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 guess I am still pretty damn clueless.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.