Page 1 of 2
Grunt / Gulp: how do I make it work, is there a good resourc
Posted: Tue Jul 14, 2015 4:12 am
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?
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Tue Jul 14, 2015 6:15 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Tue Jul 14, 2015 7:34 am
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?
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 3:24 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 6:19 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 6:30 am
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?
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 6:32 am
by Celauran
That would go in your project root, and you'd want to adjust the path to the JS files as needed.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 6:37 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 8:02 am
by Celauran
Your Gulpfile is just like a Vagrantfile or composer.json or .htaccess whatever. It's project-specific configuration, not the tool itself.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 8:09 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 8:30 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 8:40 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 8:42 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 8:48 am
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.
Re: Grunt / Gulp: how do I make it work, is there a good res
Posted: Thu Aug 06, 2015 8:55 am
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.