planetoftheweb / workflows Goto Github PK

root@empire-HP-250-G4-Notebook-PC:/var/www/html/Exploring# sudo gulp
module.js:540
throw err;
^

Error: Cannot find module 'gifsicle'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object. (/var/www/html/Exploring/node_modules/imagemin/node_modules/imagemin-gifsicle/index.js:4:16)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object. (/var/www/html/Exploring/node_modules/imagemin/index.js:170:27)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object. (/var/www/html/Exploring/node_modules/gulp-imagemin/index.js:8:16)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object. (/var/www/html/Exploring/gulpfile.js:11:16)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Liftoff.handleArguments (/usr/lib/node_modules/gulp/bin/gulp.js:116:3)
at Liftoff.execute (/usr/lib/node_modules/gulp/node_modules/liftoff/index.js:203:12)
at module.exports (/usr/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:51:3)
at Liftoff. (/usr/lib/node_modules/gulp/node_modules/liftoff/index.js:195:5)
at /usr/lib/node_modules/gulp/node_modules/liftoff/index.js:165:9
at /usr/lib/node_modules/gulp/node_modules/v8flags/index.js:110:14
at /usr/lib/node_modules/gulp/node_modules/v8flags/index.js:38:12
at /usr/lib/node_modules/gulp/node_modules/v8flags/index.js:49:7
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:686:11)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3

Hey Ray, I'have been using your course to setup the enviroment for my actual project, everthing worked fine until here, but uglyfy isn't effect nothing on my javascritp. Alredy search for answers on stackoverflow but note clearify this... you have some directions?

Thanks for this very helpful tutorial.

It seems this hasn't been updated in quite some time and it no longer works as intended. Most importantly the gulp task below is out of date and no longer does an automatic reload when the sass is updated:

gulp.task('compass', function() { gulp.src(sassSources) .pipe(compass({ sass: 'components/sass', image: 'builds/development/images', style: 'expanded' }) .on('error', gutil.log)) .pipe(gulp.dest('builds/development/css')) .pipe(connect.reload()) });

I haven't been able to get to the bottom of the changes and it seems that there is an issue with the gulp-livereload. This is a possible solution that I have not tried yet.

I am following the course but I'm using gulp 4 instead of 3
had no problems with using glup.series and gulp.parallel
but now I'm stuck with gulp-connect and livereload
it kinda works as it should but terminating process is causing some problems:

The following tasks did not complete: default, connect
Did you forget to signal async completion?

I know answer is somewhere here:
Gulp error: The following tasks did not complete: Did you forget to signal async completion?
or here:
LiveReload is broken
but I can't manage to find it

gulp.task('css', function() {
  return gulp.src(PATH)
//...
    .pipe(connect.reload());
})
gulp.task('connect', function(done) {
  connect.server({
      root: 'builds/development/',
      livereload: true
    }), function() { this.server.on('close', done) }
});
gulp.task('watch', function(done) {
  //...
  gulp.watch(PATH, gulp.series('css'));
  done()
})

gulp.task('default', gulp.parallel('connect', 'watch'));

I tried modifying my watch task to look more like:

function watchTask (done) {
  watch('public').on('change', (filepath) =>
    src(filepath, { read: false }).pipe(connect.reload()))
  done()
} 

to no success..

this works , just as it should (although terminating task hangs bash in vscode? but that completely unrelated issue ...)

gulp.task('css', function() {
  return gulp.src(PATH)
    // ..
    .pipe(connect.reload());
})

gulp.task('connect', function(done) {
  connect.server({
    root: 'builds/development/',
    livereload: true
  })
  done()
});

gulp.task('watch', function(done) {
// ..
  gulp.watch(PATH, gulp.series('css'));
  done()
})

gulp.task('default', gulp.parallel('connect', 'watch'));

Hi Ray

I follow the course and it is really great, but when i clone the github i found that the outputDir + 'css' does not create the style.css in the correct directory but in builds/css/style.css so the SASS is not compile where is should compile.

Hello and thanks for the tutorial!

I'm following along and noticed that whenever the gulp.task 'compass' is performed it creates an addition 'css' directory at the root.

Any idea why this is happening and how to prevent it?

Thanks!

But cls: https://en.wikipedia.org/wiki/CLS_(command)

I don't know if this is how I'm supposed to submit a suggestion for a change, but I was running into an issue using the video syntax and wasn't able to optimize the images or see the results in the console.

I found that imagemin v. 3+ no longer requires pngcrush, and has slightly changed syntax, specifically:
.pipe(gulpif(env === 'prod', imagemin([ imagemin.jpegtran({ progressive: true }), imagemin.optipng({ optimizationLevel : 5 }), imagemin.svgo({ plugins: [{ removeViewBox: true }]}) ], { verbose: true })))
instead of:

`
.pipe(gulpif(env === 'production', imagemin({
  progressive: true,
  svgoPlugins: [{ removeViewBox: false }],
  use: [pngcrush()]
  })))

`

Hope it helps.

I am in section 4: setting up environment variables. I am getting this error:
`var env = proccess.env.NODE_ENV || 'developement';
^

ReferenceError: proccess is not defined
`

here is my full gulp file:

`var gulp = require('gulp'),
gutil = require('gulp-util'),
coffee = require('gulp-coffee'),
browserify = require('gulp-browserify'),
compass = require('gulp-compass'),
connect = require('gulp-connect'),
concat = require('gulp-concat');

var env,
coffeeSources,
jsSources,
sassSources,
htmlSources,
jsonSources,
outputDir;

var env = proccess.env.NODE_ENV || 'developement';

if (env === 'development'){
outputDir = 'builds/development/';
} else {
outputDir = 'builds/production/';
}

coffeeSources = ['components/coffee/tagline.coffee'];
jsSources = [
'components/scripts/rclick.js',
'components/scripts/pixgrid.js',
'components/scripts/tagline.js',
'components/scripts/template.js'
];
sassSources = ['components/sass/style.scss'];
htmlSources = [outputDir + '.html'];
jsonSources = [outputDir + '/js/.json']

gulp.task('coffee',function(){
gulp.src(coffeeSources)
.pipe(coffee({bare: true})
.on('error', gutil.log))
.pipe(gulp.dest('components/scripts'))
});

gulp.task('js', function(){
gulp.src(jsSources)
.pipe(concat('script.js'))
.pipe(browserify())
.pipe(gulp.dest(outputDir + 'js'))
.pipe(connect.reload())
});

gulp.task('compass', function(){
gulp.src(sassSources)
.pipe(compass({
sass: 'components/sass',
image: outputDir+'images',
style: 'expanded'
}))
.on('error', gutil.log)
.pipe(gulp.dest(outputDir+'css'))
.pipe(connect.reload())
});

gulp.task('watch', function(){
gulp.watch(coffeeSources, ['coffee']);
gulp.watch(jsSources, ['js']);
gulp.watch('components/sass/*.scss', ['compass']);
gulp.watch(htmlSources, ['html']);
gulp.watch(jsonSources, ['json']);
});

gulp.task('connect', function(){
connect.server({
root: outputDir,
livereload: true
});
});

gulp.task('html',function(){
gulp.src(htmlSources)
.pipe(connect.reload())
});

gulp.task('json',function(){
gulp.src(jsonSources)
.pipe(connect.reload())
});

gulp.task('default', ['html','json','coffee','js','compass','connect', 'watch']);
`