Menu icon Foundation

Developer | Cyprus

Developer

My Posts

No Content

My Comments

yeoman commented on RCD's post over 3 years

really?!! that's weird you know! port 8001 interesting, I thought, Browser-sync automatically decides what port to assign/use.

yeoman commented on RCD's post over 3 years

Hi Ryan,
 
I see you know what its kinda a same here. Thought it shouldn't be like that. But whenever i tried to work offline the whole setup starts but don't work fine. Lets put this way, since Browsersync is inside with the proxy, server,  & reload stuff. Therefore it required internet. Well that's my theory! But may be you should try to do manual npm install and bower install.
One more thing, for some reason whole setup didn't work for me quite well all the time. so, whenever i do new fresh install and i manually run these commands as well like as follow 
//after doing this
foundation new --framework sites --template zurb
npm install
bower install

//i manually do this as well
npm install babel-register babel-plugin-transform-es2015-arrow-functions babel-plugin-transform-es2015-block-scoped-functions babel-plugin-transform-es2015-block-scoping babel-plugin-transform-es2015-classes babel-plugin-transform-es2015-destructuring babel-plugin-transform-es2015-template-literals babel-plugin-transform-es2015-parameters babel-plugin-transform-es2015-shorthand-properties babel-plugin-transform-es2015-spread babel-plugin-transform-es2015-modules-commonjs

This has been my fix for my all setup errors and stuff. Try to do that and see if it will work for your offline as well.
 
Cheers!

yeoman commented on RCD's post over 3 years

did you do any recent changes in gulpfile.babel.js? if you did then obliviously its from there. If not, try running again or do a clean install again. i think something is missing or not installed properly perhaps...

yeoman commented on Ercan Murat KISACA's post over 3 years

and me again =) in case someone wanted to make this work in FoundationPress Then solution is pretty much same (i got you covered man)
same like above add this in package.json
"gulp-csso": "1.1.0",
"vinyl-buffer": "1.0.0",
"merge-stream": "1.0.0",
"gulp.spritesmith": "6.2.0",
and in gulpgfile.js add this code 
// sprite
gulp.task('sprite', function () {

var spriteData = gulp.src('assets/images/sprite/*.png')
.pipe(spritesmith({
imgName: '../images/sprite.png',
cssName: '_sprite.scss'
}));
var spriteImg = spriteData.img.pipe(gulp.dest('assets/images'));
var spriteCss = spriteData.css.pipe(gulp.dest('assets/scss/modules/'));
if (!isProduction || isProduction) return (spriteImg && spriteCss);
});

// Clean sprite
gulp.task('clean:sprite', function() {
return del([
'assets/images/sprite.png',
]);
});

again in gulpfile check this last gulp task where  it says gulp.task('default', ['build', 'browser-sync'], function() { and following code (rephrase after me =p)
// watch sprite
gulp.watch(['assets/images/sprite/*/.png'], ['clean:sprite', 'sprite'])
.on('change', function(event) {
logFileChange(event);
});

All done and set (i think so) just run this now
npm install
 
and watch your changes or compile just like normal npm task ie npm run watch or npm run production or whatever.
generated sprite image is under assets/images with the file name of sprite.png while individual sprite images should go to assets/images/sprite folder.
generated css in under assets/scss/module for me.
Tweak mangle or whatever however you like with the code.  I gotta run now. Run forest run! 
 
Cheers!
 

yeoman commented on Ercan Murat KISACA's post over 3 years

i will be waiting curiously! :D Hope you get it working as its working for me :)

yeoman commented on Ercan Murat KISACA's post over 3 years

well let me tell you a quick dirty solution. caution had bugs and cockroaches :P   
In your package.json add this under "devDependencies" 
 
 
"gulp-csso": "1.1.0"<span class="token punctuation">,

<span class="token string">"vinyl-buffer"</span><span class="token punctuation">:</span> <span class="token string">"^1.0.0"</span><span class="token punctuation">,</span>

<span class="token string">"merge-stream"</span><span class="token punctuation">:</span> <span class="token string">"^1.0.0"</span><span class="token punctuation">,</span>

<span class="token string">"gulp.spritesmith"</span><span class="token punctuation">:</span> <span class="token string">"^6.2.0"</span><span class="token punctuation">,</span>

In your gulp.babel.js add this code 
 
 
/*
* @summary For sprites config only, generating sprite css and image
* @author danish
*/
var csso = require('gulp-csso');
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');
var spritesmith = require('gulp.spritesmith');

function sprite() {
var spriteData = gulp.src('src/assets/img/sprite/*.png')
.pipe(spritesmith({
imgName: '../img/sprite.png',
cssName: '_sprite.scss'
}));
var spriteImg = spriteData.img.pipe(gulp.dest('src/assets/img'));
var spriteCss = spriteData.css.pipe(gulp.dest('src/assets/scss/modules/'));
if (!PRODUCTION) return (spriteImg && spriteCss);
}

// and in your watch function add below mentioned line
gulp.watch('src/assets/img/sprite*/', gulp.series(sprite, browser.reload));

 
after adding above code. do one time npm install
 
 
npm install
so this way all dev dependencies are installed! Thing to notice in above code are as follow:
my sprite folder is under src/assets/img/sprite/*.png which contains individual images.
Generated output ie sprite is being generated under src/assets/img folder with the name of sprite.png you can rename it by renaming value of imgName key in spritesmith object. 
and my generated css is under src/assets/scss/modules with the file name of sprite.scss. Again, have a look in the object of spritesmith to do desired changes.
 
Cheers!

Posts Followed

  • 6
    Replies
  • Foundation Watch Signal Async Completion Error

    By RCD

    error

    I got this error. I have not made any changes to this project. The only difference is that I attempted to run this offline.&nbsp; &nbsp; [07:17:10] Requiring external module babel-register [07:18:35] Using gulpfile ~\Desktop\SMO Docs\smoProject\gulpfil... (continued)

    Last Reply by yeoman over 3 years ago



Following

Followers

My Posts

No Content

My Comments

You commented on RCD's post over 3 years

really?!! that's weird you know! port 8001 interesting, I thought, Browser-sync automatically decides what port to assign/use.

You commented on RCD's post over 3 years

Hi Ryan,
 
I see you know what its kinda a same here. Thought it shouldn't be like that. But whenever i tried to work offline the whole setup starts but don't work fine. Lets put this way, since Browsersync is inside with the proxy, server,  & reload stuff. Therefore it required internet. Well that's my theory! But may be you should try to do manual npm install and bower install.
One more thing, for some reason whole setup didn't work for me quite well all the time. so, whenever i do new fresh install and i manually run these commands as well like as follow 
//after doing this
foundation new --framework sites --template zurb
npm install
bower install

//i manually do this as well
npm install babel-register babel-plugin-transform-es2015-arrow-functions babel-plugin-transform-es2015-block-scoped-functions babel-plugin-transform-es2015-block-scoping babel-plugin-transform-es2015-classes babel-plugin-transform-es2015-destructuring babel-plugin-transform-es2015-template-literals babel-plugin-transform-es2015-parameters babel-plugin-transform-es2015-shorthand-properties babel-plugin-transform-es2015-spread babel-plugin-transform-es2015-modules-commonjs

This has been my fix for my all setup errors and stuff. Try to do that and see if it will work for your offline as well.
 
Cheers!

You commented on RCD's post over 3 years

did you do any recent changes in gulpfile.babel.js? if you did then obliviously its from there. If not, try running again or do a clean install again. i think something is missing or not installed properly perhaps...

You commented on Ercan Murat KISACA's post over 3 years

and me again =) in case someone wanted to make this work in FoundationPress Then solution is pretty much same (i got you covered man)
same like above add this in package.json
"gulp-csso": "1.1.0",
"vinyl-buffer": "1.0.0",
"merge-stream": "1.0.0",
"gulp.spritesmith": "6.2.0",
and in gulpgfile.js add this code 
// sprite
gulp.task('sprite', function () {

var spriteData = gulp.src('assets/images/sprite/*.png')
.pipe(spritesmith({
imgName: '../images/sprite.png',
cssName: '_sprite.scss'
}));
var spriteImg = spriteData.img.pipe(gulp.dest('assets/images'));
var spriteCss = spriteData.css.pipe(gulp.dest('assets/scss/modules/'));
if (!isProduction || isProduction) return (spriteImg && spriteCss);
});

// Clean sprite
gulp.task('clean:sprite', function() {
return del([
'assets/images/sprite.png',
]);
});

again in gulpfile check this last gulp task where  it says gulp.task('default', ['build', 'browser-sync'], function() { and following code (rephrase after me =p)
// watch sprite
gulp.watch(['assets/images/sprite/*/.png'], ['clean:sprite', 'sprite'])
.on('change', function(event) {
logFileChange(event);
});

All done and set (i think so) just run this now
npm install
 
and watch your changes or compile just like normal npm task ie npm run watch or npm run production or whatever.
generated sprite image is under assets/images with the file name of sprite.png while individual sprite images should go to assets/images/sprite folder.
generated css in under assets/scss/module for me.
Tweak mangle or whatever however you like with the code.  I gotta run now. Run forest run! 
 
Cheers!
 

You commented on Ercan Murat KISACA's post over 3 years

i will be waiting curiously! :D Hope you get it working as its working for me :)

You commented on Ercan Murat KISACA's post over 3 years

well let me tell you a quick dirty solution. caution had bugs and cockroaches :P   
In your package.json add this under "devDependencies" 
 
 
"gulp-csso": "1.1.0"<span class="token punctuation">,

<span class="token string">"vinyl-buffer"</span><span class="token punctuation">:</span> <span class="token string">"^1.0.0"</span><span class="token punctuation">,</span>

<span class="token string">"merge-stream"</span><span class="token punctuation">:</span> <span class="token string">"^1.0.0"</span><span class="token punctuation">,</span>

<span class="token string">"gulp.spritesmith"</span><span class="token punctuation">:</span> <span class="token string">"^6.2.0"</span><span class="token punctuation">,</span>

In your gulp.babel.js add this code 
 
 
/*
* @summary For sprites config only, generating sprite css and image
* @author danish
*/
var csso = require('gulp-csso');
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');
var spritesmith = require('gulp.spritesmith');

function sprite() {
var spriteData = gulp.src('src/assets/img/sprite/*.png')
.pipe(spritesmith({
imgName: '../img/sprite.png',
cssName: '_sprite.scss'
}));
var spriteImg = spriteData.img.pipe(gulp.dest('src/assets/img'));
var spriteCss = spriteData.css.pipe(gulp.dest('src/assets/scss/modules/'));
if (!PRODUCTION) return (spriteImg && spriteCss);
}

// and in your watch function add below mentioned line
gulp.watch('src/assets/img/sprite*/', gulp.series(sprite, browser.reload));

 
after adding above code. do one time npm install
 
 
npm install
so this way all dev dependencies are installed! Thing to notice in above code are as follow:
my sprite folder is under src/assets/img/sprite/*.png which contains individual images.
Generated output ie sprite is being generated under src/assets/img folder with the name of sprite.png you can rename it by renaming value of imgName key in spritesmith object. 
and my generated css is under src/assets/scss/modules with the file name of sprite.scss. Again, have a look in the object of spritesmith to do desired changes.
 
Cheers!

Posts Followed

Following

Followers

  • No Content