Page 1 of 2

Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 4:46 am
by simonmlewis
So, here is some code from my gulp so far.
i'm sure it's installed correctly.
But nothing is showing in any folders for any minified code. I'm not sure what I am looking for though.

Could someone please lead me...?

Code: Select all

gulp-jshint@1.11.2 node_modules\gulp-jshint
+-- through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
+-- minimatch@2.0.10 (brace-expansion@1.1.0)
+-- gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.
0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, object-assign@3.0.0, b
eeper@1.1.0, replace-ext@0.0.1, minimist@1.1.3, vinyl@0.5.1, chalk@1.1.0, lodash
.template@3.6.2, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.11)
+-- rcloader@0.1.2 (rcfinder@0.1.8, lodash@2.4.2)
+-- lodash@3.10.1
+-- jshint@2.8.0 (strip-json-comments@1.0.4, exit@0.1.2, shelljs@0.3.0, console-
browserify@1.1.0, cli@0.6.6, htmlparser2@3.8.3, lodash@3.7.0)

gulp-sass@2.0.4 node_modules\gulp-sass
+-- object-assign@2.1.1
+-- through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
+-- gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.
0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, object-assign@3.0.0, b
eeper@1.1.0, replace-ext@0.0.1, minimist@1.1.3, vinyl@0.5.1, chalk@1.1.0, lodash
.template@3.6.2, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.11)
+-- vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
+-- node-sass@3.2.0 (get-stdin@4.0.1, async-foreach@0.1.3, chalk@1.1.0, mkdirp@0
.5.1, meow@3.3.0, glob@5.0.14, gaze@0.5.1, nan@1.9.0, npmconf@2.1.2, request@2.6
0.0, sass-graph@2.0.1, pangyp@2.3.0)

C:\xampp\phpMyAdmin\site>gulp
[09:01:37] Using gulpfile C:\xampp\phpMyAdmin\site\gulpfile.js
[09:01:37] Starting 'lint'...
[09:01:37] Starting 'sass'...
[09:01:37] Starting 'scripts'...
[09:01:37] Starting 'watch'...
[09:01:37] Finished 'watch' after 14 ms
[09:01:37] Finished 'sass' after 33 ms
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 22, col 45, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 25, col 38, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 31, col 45, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 34, col 38, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 39, col 23, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 40, col 35, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 44, col 75, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 46, col 50, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 47, col 61, Use
'!==' to compare with '0'.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 47, col 83, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 48, col 6, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 49, col 25, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 50, col 16, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 54, col 47, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 56, col 66, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 59, col 70, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 60, col 48, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 61, col 46, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 64, col 44, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 70, col 47, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 71, col 59, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 73, col 44, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 75, col 42, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 78, col 145, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 82, col 94, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 85, col 124, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 88, col 11, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 89, col 21, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 94, col 15, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 96, col 28, Use
'!==' to compare with 'null'.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 97, col 49, Miss
ing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 100, col 15, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 104, col 16, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 106, col 68, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 107, col 62, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 108, col 56, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 109, col 66, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 110, col 27, Use
 '!==' to compare with 'null'.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 111, col 84, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 112, col 45, Use
 '===' to compare with 'null'.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 112, col 116, Mi
ssing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 114, col 40, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 115, col 124, Us
e '!==' to compare with 'null'.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 116, col 95, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 119, col 31, 'cs
sdisplay' is already defined.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 119, col 67, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 122, col 17, 'cs
sdisplay' used out of scope.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 122, col 35, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 125, col 17, 'cs
sdisplay' used out of scope.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 125, col 34, Mis
sing semicolon.
C:\xampp\phpMyAdmin\site\js\animatedcollapse.js: line 125, col 34, Too
 many errors. (56% scanned).

51 errors
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 4, col 20, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 6, col 29, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 7, col 27, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 9, col 1, document.w
rite can be a form of eval.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 9, col 44, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 10, col 1, document.
write can be a form of eval.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 10, col 206, Missing
 semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 11, col 1, document.
write can be a form of eval.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 11, col 27, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 14, col 25, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 17, col 54, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 19, col 69, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 22, col 44, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 24, col 41, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 25, col 38, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 26, col 2, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 29, col 25, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 30, col 75, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 32, col 69, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 33, col 108, Missing
 semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 33, col 114, Missing
 semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 35, col 2, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 39, col 56, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 40, col 2, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 43, col 10, 'e' is a
lready defined.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 43, col 28, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 44, col 82, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 45, col 41, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 45, col 50, Value of
 'e' may be overwritten in IE 8 and earlier.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 45, col 55, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 47, col 20, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 49, col 21, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 50, col 2, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 54, col 37, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 55, col 48, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 57, col 2, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 60, col 69, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 61, col 18, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 62, col 80, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 65, col 45, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 67, col 18, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 68, col 2, Missing s
emicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 71, col 65, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 73, col 38, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 74, col 60, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 75, col 95, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 76, col 9, Don't mak
e functions within a loop.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 75, col 96, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 76, col 96, Missing
semicolon.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 77, col 5, Don't mak
e functions within a loop.
C:\xampp\phpMyAdmin\site\js\gradualfader.js: line 77, col 5, Too many
errors. (98% scanned).

51 errors
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 5, col 8, Use '===
' to compare with ''.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 24, col 4, Missing
 semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 44, col 84, Use '=
==' to compare with ''.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 55, col 31, Use '=
==' to compare with ''.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 55, col 50, Use '=
==' to compare with 'null'.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 61, col 26, Use '=
==' to compare with 'undefined'.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 108, col 9, Missin
g semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 110, col 64, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 111, col 13, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 136, col 13, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 138, col 12, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 141, col 38, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 143, col 35, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 151, col 12, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 153, col 49, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 154, col 13, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 176, col 14, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 178, col 50, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 179, col 15, Missi
ng semicolon.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 197, col 84, Use '
===' to compare with ''.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 208, col 31, Use '
===' to compare with ''.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 208, col 50, Use '
===' to compare with 'null'.
C:\xampp\phpMyAdmin\site\js\javascriptjbj.js: line 214, col 26, Use '
===' to compare with 'undefined'.

23 errors
C:\xampp\phpMyAdmin\site\js\scroll.js: line 15, col 2, Unnecessary sem
icolon.
C:\xampp\phpMyAdmin\site\js\scroll.js: line 23, col 57, Missing semico
lon.

2 errors
[09:01:37] Finished 'lint' after 205 ms
[09:01:38] Finished 'scripts' after 539 ms
[09:01:38] Starting 'default'...
[09:01:38] Finished 'default' after 9.03 µs


Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 6:23 am
by Celauran
I don't see anything in there about css-minify. What does your gulpfile look like?

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 6:32 am
by simonmlewis

Code: Select all

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

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
Maybe I am not telling it to do anything yet?!?!

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 7:30 am
by Celauran
I definitely don't see anything in there about minifying your CSS, but uglify should handle the JS. Does the dest directory exist?

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 7:38 am
by simonmlewis
Yes. Not seen that before. It msut have created it.
Two files in there:
all.js
all.min.js

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 10:50 am
by simonmlewis
What do I need to make it run the CSS, and are thsoe two files suppose to be there?

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 10:58 am
by Celauran
gulp-minify-css and yes, that's where you told gulp to put them.

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 11:05 am
by simonmlewis
I now have this in the bottom of the gulpfile...

Code: Select all

.....
// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

var gulp = require('gulp')
, minifyCss = require("gulp-minify-css");

// task
gulp.task('minify-css', function () {
    gulp.src('./source/style.css') // path to your file
    .pipe(minifyCss())
    .pipe(gulp.dest('path/to/destination'));
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch', 'minify-css']);
I've told it where my stylesheet is. But nothing is being generated anywhere.

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 11:17 am
by simonmlewis
Ive figured it out.
Do I need to close and open CMD each time, and run "gulp" to process updates. Which then go into the dist folder, and I then just upload those to the live server?

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 11:19 am
by simonmlewis
Is there a known plugin code for minifiy *.php?
So all my code works in index.php but minified?

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 11:48 am
by Celauran
What would be the advantage of minified PHP?

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 12:04 pm
by simonmlewis
For the same reason you minify CSS and JS - to reduce the amount of white space.
I see you can do it with HTML. Not for PHP?

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 12:09 pm
by Celauran
PHP doesn't get sent to the browser, so it wouldn't matter. You can Gzip your HTML, but that's not something Gulp will do for you.

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 12:15 pm
by simonmlewis
No but it still wastes file space doesn't it - like space in JS and CSS does.
So apart from Gulp minifying CSS and JS... what else can Gulp do to help speed things up and reduce wasted space?

Re: Gulp: Work in progress, newbie needs support please

Posted: Thu Aug 13, 2015 12:20 pm
by Celauran
simonmlewis wrote:No but it still wastes file space doesn't it - like space in JS and CSS does.
No. Minifying it would actually use more space as you'd have two copies of the file; one minified, one not.
simonmlewis wrote:So apart from Gulp minifying CSS and JS... what else can Gulp do to help speed things up and reduce wasted space?
Gulp can do all kinds of stuff. Compile your SASS/LESS to CSS on the fly, live reload, etc
http://gulpjs.com/plugins/

The linting is super useful, especially if you don't have a linter in your editor.