Menu icon Foundation

Designer

I am using Foundation 5. And Apps.

My Posts


  • 2
    Replies
  • npm start for FS?

    By Robert North

    clinodenpmSass

    Hi guys, Am starting a new project with FS after playing around for a while with FA. I'm using FA with Sass, and I am wondering if there is a elegant solution to start a server like what you guys created for FA? You know like with FA you can just go:

    Last Reply by Robert North over 3 years ago









My Comments

Robert North commented on Shawn Jones's post over 2 years

This is a bit annoying. Should be simple to change the width of this. Why add scss variables for changing the PIP size but not the overall width of the tip? 
Unfortunately setting max-width for .tooltip has no effect on my end. I had to set width as well: 
.tooltip {
max-width: rem-calc(300px) !important;
width: rem-calc(300px);
}

Robert North commented on Robert North's post over 3 years

Thanks Rafi.

It looks like it might be a feature of Fs6 though.

If anybody else wants to do what I wanted and they have a bash with python, find your way to your site directory built with grunt, and run:

python -m SimpleHTTPServer 8000

Robert North commented on Robert North's post about 4 years

Bump the casbah. Any ideas?

Robert North commented on Michael Compton's post about 4 years

Just a note, I added some additional stuff in there you don't need, like the following:

  // Copy my special javascripts
  gulp.src('./client/assets/js/svg.js')
    .pipe(gulp.dest('build/assets/js'));

That is a custom script of mine so probably best to delete it. (Edited the script earlier so it is omitted)

Glad you got it working!

Robert North commented on Michael Compton's post about 4 years

I feel your pain man. I spent half a day working this out.

I did also add, which I didn't mention in the last thread, something to the gulp.watch task down the bottom.

Checkout my gulpfile.js

 // FOUNDATION FOR APPS TEMPLATE GULPFILE
// -------------------------------------
// This file processes all of the assets in the "client" folder, combines them with the Foundation
// for Apps assets, and outputs the finished files in the "build" folder as a finished app.

// 1. LIBRARIES
// - - - - - - - - - - - - - - -

var gulp           = require('gulp'),
    rimraf         = require('rimraf'),
    runSequence    = require('run-sequence'),
    frontMatter    = require('gulp-front-matter'),
    autoprefixer   = require('gulp-autoprefixer'),
    sass           = require('gulp-ruby-sass'),
    uglify         = require('gulp-uglify'),
    concat         = require('gulp-concat'),
    connect        = require('gulp-connect'),
    path           = require('path'),
    modRewrite     = require('connect-modrewrite'),
    dynamicRouting = require('./bower_components/foundation-apps/bin/gulp-dynamic-routing');

// 2. SETTINGS VARIABLES
// - - - - - - - - - - - - - - -

// Sass will check these folders for files when you use @import.
var sassPaths = [
  'client/assets/scss',
  'bower_components/foundation-apps/scss'
];
// These files include Foundation for Apps and its dependencies
var foundationJS = [
  'bower_components/fastclick/lib/fastclick.js',
  'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
  'bower_components/tether/tether.js',
  'bower_components/angular/angular.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/ui-router/release/angular-ui-router.js',
  'bower_components/foundation-apps/js/vendor/**/*.js',
  'bower_components/foundation-apps/js/angular/**/*.js',
  '!bower_components/foundation-apps/js/angular/app.js'
];
// These files are for your app's JavaScript
var appJS = [
  'client/assets/js/app.js'
];

// 3. TASKS
// - - - - - - - - - - - - - - -

// Cleans the build directory
gulp.task('clean', function(cb) {
  rimraf('./build', cb);
});

// Copies user-created files and Foundation assets
gulp.task('copy', function() {
  var dirs = [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*',
    './client/assets/img/*.*',
    'client/assets/js/*.*'
  ];

  // Everything in the client folder except templates, Sass, and JS
  gulp.src(dirs, {
    base: './client/'
  })
    .pipe(gulp.dest('./build'));

  // Iconic SVG icons
  gulp.src('./bower_components/foundation-apps/iconic/**/*')
    .pipe(gulp.dest('./build/assets/img/iconic/'));

  // Foundation's Angular partials
  return gulp.src(['./bower_components/foundation-apps/js/angular/components/**/*.html'])
    .pipe(gulp.dest('./build/components/'));
});

// Compiles Sass
gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe(sass({
      loadPath: sassPaths,
      style: 'nested',
      bundleExec: true
    }))
    .on('error', function(e) {
      console.log(e);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'));
});

// Compiles and copies the Foundation for Apps JavaScript, as well as your app's custom JS
gulp.task('uglify', function() {
  // Foundation JavaScript
  gulp.src(foundationJS)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('foundation.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;

  // App JavaScript
  return gulp.src(appJS)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;
});

// Copies your app's page templates and generates URLs for them
gulp.task('copy-templates', ['copy'], function() {
  return gulp.src('./client/templates/**/*.html')
    .pipe(dynamicRouting({
      path: 'build/assets/js/routes.js',
      root: 'client'
    }))
    .pipe(gulp.dest('./build/templates'))
  ;
});

// Starts a test server, which you can view at http://localhost:8080
gulp.task('server:start', function() {
  connect.server({
    root: './build',
    middleware: function() {
      return [
        modRewrite(['^[^\\.]*$ /index.html [L]'])
      ];
    },
  });
});

// Builds your entire app once, without starting a server
gulp.task('build', function() {
  runSequence('clean', ['copy', 'sass', 'uglify'], 'copy-templates', function() {
    console.log("Successfully built.");
  })
});



// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task('default', ['build', 'server:start'], function() {
  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);

  // Watch JavaScript
  gulp.watch(['./client/assets/js/**/*', './js/**/*', './client/assets/js/*.*'], ['uglify']);

  // Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*', './client/assets/js/**/*', './client/assets/img/*.*'], ['copy']);

  console.log("Copied some files");

  // Watch app templates
  gulp.watch(['./client/templates/**/*.html'], ['copy-templates']);
});

Specifically this bit:

// Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*', './client/assets/js/**/*', './client/assets/img/*.*'], ['copy']);

Now with mine when I create a new image and put it in /assets/client/img I stop and start my server again and it copies it over.

Again, I'm like you and don't fully understand if I've done it correctly. Ideally what I would like is to not restart the server every time but this works for now.

See if that helps.

Robert North commented on Michael Compton's post about 4 years

Checkout my thread on the same issue Michael

http://foundation.zurb.com/forum/posts/22144-images-in-apps---where-do-they-go

Not sure if it's right, but you need to tell gulp, with gulpfile.js to copy over your image files when you build the app.

Robert North commented on Robert North's post about 4 years

Sorry, I must have explained it poorly. That is a great example though. I updated the title of the post.

I am trying to achieve a grid-block taking up the whole screen size. Meanwhile off screen, there is another grid-block, which is also the size of the screen. The second grid-block only comes into view after you have scrolled.

So if you put in just one grid-block, it automatically fills the full width and height of the screen. If you put in a second grid-block, by default, the screen will be split by those 2 grid-blocks, each grid-block taking half the screen. That is really awesome default functionality, but I'm trying to see if it is possible to achieve kind of the opposite, where the grids are just stacked, each one taking up the full screen size.

Robert North commented on Robert North's post about 4 years

In case anybody has the same issue I had, I was eventually able to solve it by fixing my bower install.

I guess bower was installed as root at some stage, which in my case was problematic. When I went to install bower stuff into my apps it wouldn't have permission, throwing errors like:

Stack trace:
Error: EACCES,

In my situation, there were folders like ~/.cache/bower/ which were owned by root. I deleted 'bower' in .cache, but it wasn't enough. I needed to delete .cache as well.

There is a CL for this as well, such as: sudo bower cache clean

But for me this wasn't enough. In the end I just removed the whole ~/.cache folder because it was owned by root with sudo rm -fr ~/.cache

Then from my non-sudo account, reinstalled bower with global: npm install -g bower

Now I can create app with foundation-apps new appName and watch the app and no errors are thrown.

Hope it helps if you're new to all this like I am.

Robert North commented on Robert North's post about 4 years

After installing the bower version of angular-scroll, in my gulpfile.js I added the following to the appsJS array:

  'bower_components/angular-scroll/angular-scroll.js',

Instead of declaring 'angular-scroll' with angular.module, I took that out and just kept the dependency 'duScroll'.

Then I was able to use angular-scrolls in my app.

I'm not sure if this is the best way to do it, but it worked.

Robert North commented on Robert North's post about 4 years

I see now. Thanks Rafi!

This is my first time using states like this - I've always done this sort of thing manually with jquery / ajax. Incredible how much easier this makes it.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Shawn Jones's post over 2 years

This is a bit annoying. Should be simple to change the width of this. Why add scss variables for changing the PIP size but not the overall width of the tip? 
Unfortunately setting max-width for .tooltip has no effect on my end. I had to set width as well: 
.tooltip {
max-width: rem-calc(300px) !important;
width: rem-calc(300px);
}

You commented on Robert North's post over 3 years

Thanks Rafi.

It looks like it might be a feature of Fs6 though.

If anybody else wants to do what I wanted and they have a bash with python, find your way to your site directory built with grunt, and run:

python -m SimpleHTTPServer 8000

You commented on Robert North's post about 4 years

Bump the casbah. Any ideas?

You commented on Michael Compton's post about 4 years

Just a note, I added some additional stuff in there you don't need, like the following:

  // Copy my special javascripts
  gulp.src('./client/assets/js/svg.js')
    .pipe(gulp.dest('build/assets/js'));

That is a custom script of mine so probably best to delete it. (Edited the script earlier so it is omitted)

Glad you got it working!

You commented on Michael Compton's post about 4 years

I feel your pain man. I spent half a day working this out.

I did also add, which I didn't mention in the last thread, something to the gulp.watch task down the bottom.

Checkout my gulpfile.js

 // FOUNDATION FOR APPS TEMPLATE GULPFILE
// -------------------------------------
// This file processes all of the assets in the "client" folder, combines them with the Foundation
// for Apps assets, and outputs the finished files in the "build" folder as a finished app.

// 1. LIBRARIES
// - - - - - - - - - - - - - - -

var gulp           = require('gulp'),
    rimraf         = require('rimraf'),
    runSequence    = require('run-sequence'),
    frontMatter    = require('gulp-front-matter'),
    autoprefixer   = require('gulp-autoprefixer'),
    sass           = require('gulp-ruby-sass'),
    uglify         = require('gulp-uglify'),
    concat         = require('gulp-concat'),
    connect        = require('gulp-connect'),
    path           = require('path'),
    modRewrite     = require('connect-modrewrite'),
    dynamicRouting = require('./bower_components/foundation-apps/bin/gulp-dynamic-routing');

// 2. SETTINGS VARIABLES
// - - - - - - - - - - - - - - -

// Sass will check these folders for files when you use @import.
var sassPaths = [
  'client/assets/scss',
  'bower_components/foundation-apps/scss'
];
// These files include Foundation for Apps and its dependencies
var foundationJS = [
  'bower_components/fastclick/lib/fastclick.js',
  'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
  'bower_components/tether/tether.js',
  'bower_components/angular/angular.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/ui-router/release/angular-ui-router.js',
  'bower_components/foundation-apps/js/vendor/**/*.js',
  'bower_components/foundation-apps/js/angular/**/*.js',
  '!bower_components/foundation-apps/js/angular/app.js'
];
// These files are for your app's JavaScript
var appJS = [
  'client/assets/js/app.js'
];

// 3. TASKS
// - - - - - - - - - - - - - - -

// Cleans the build directory
gulp.task('clean', function(cb) {
  rimraf('./build', cb);
});

// Copies user-created files and Foundation assets
gulp.task('copy', function() {
  var dirs = [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*',
    './client/assets/img/*.*',
    'client/assets/js/*.*'
  ];

  // Everything in the client folder except templates, Sass, and JS
  gulp.src(dirs, {
    base: './client/'
  })
    .pipe(gulp.dest('./build'));

  // Iconic SVG icons
  gulp.src('./bower_components/foundation-apps/iconic/**/*')
    .pipe(gulp.dest('./build/assets/img/iconic/'));

  // Foundation's Angular partials
  return gulp.src(['./bower_components/foundation-apps/js/angular/components/**/*.html'])
    .pipe(gulp.dest('./build/components/'));
});

// Compiles Sass
gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe(sass({
      loadPath: sassPaths,
      style: 'nested',
      bundleExec: true
    }))
    .on('error', function(e) {
      console.log(e);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'));
});

// Compiles and copies the Foundation for Apps JavaScript, as well as your app's custom JS
gulp.task('uglify', function() {
  // Foundation JavaScript
  gulp.src(foundationJS)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('foundation.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;

  // App JavaScript
  return gulp.src(appJS)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;
});

// Copies your app's page templates and generates URLs for them
gulp.task('copy-templates', ['copy'], function() {
  return gulp.src('./client/templates/**/*.html')
    .pipe(dynamicRouting({
      path: 'build/assets/js/routes.js',
      root: 'client'
    }))
    .pipe(gulp.dest('./build/templates'))
  ;
});

// Starts a test server, which you can view at http://localhost:8080
gulp.task('server:start', function() {
  connect.server({
    root: './build',
    middleware: function() {
      return [
        modRewrite(['^[^\\.]*$ /index.html [L]'])
      ];
    },
  });
});

// Builds your entire app once, without starting a server
gulp.task('build', function() {
  runSequence('clean', ['copy', 'sass', 'uglify'], 'copy-templates', function() {
    console.log("Successfully built.");
  })
});



// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task('default', ['build', 'server:start'], function() {
  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);

  // Watch JavaScript
  gulp.watch(['./client/assets/js/**/*', './js/**/*', './client/assets/js/*.*'], ['uglify']);

  // Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*', './client/assets/js/**/*', './client/assets/img/*.*'], ['copy']);

  console.log("Copied some files");

  // Watch app templates
  gulp.watch(['./client/templates/**/*.html'], ['copy-templates']);
});

Specifically this bit:

// Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*', './client/assets/js/**/*', './client/assets/img/*.*'], ['copy']);

Now with mine when I create a new image and put it in /assets/client/img I stop and start my server again and it copies it over.

Again, I'm like you and don't fully understand if I've done it correctly. Ideally what I would like is to not restart the server every time but this works for now.

See if that helps.

You commented on Michael Compton's post about 4 years

Checkout my thread on the same issue Michael

http://foundation.zurb.com/forum/posts/22144-images-in-apps---where-do-they-go

Not sure if it's right, but you need to tell gulp, with gulpfile.js to copy over your image files when you build the app.

You commented on Robert North's post about 4 years

Sorry, I must have explained it poorly. That is a great example though. I updated the title of the post.

I am trying to achieve a grid-block taking up the whole screen size. Meanwhile off screen, there is another grid-block, which is also the size of the screen. The second grid-block only comes into view after you have scrolled.

So if you put in just one grid-block, it automatically fills the full width and height of the screen. If you put in a second grid-block, by default, the screen will be split by those 2 grid-blocks, each grid-block taking half the screen. That is really awesome default functionality, but I'm trying to see if it is possible to achieve kind of the opposite, where the grids are just stacked, each one taking up the full screen size.

You commented on Robert North's post about 4 years

In case anybody has the same issue I had, I was eventually able to solve it by fixing my bower install.

I guess bower was installed as root at some stage, which in my case was problematic. When I went to install bower stuff into my apps it wouldn't have permission, throwing errors like:

Stack trace:
Error: EACCES,

In my situation, there were folders like ~/.cache/bower/ which were owned by root. I deleted 'bower' in .cache, but it wasn't enough. I needed to delete .cache as well.

There is a CL for this as well, such as: sudo bower cache clean

But for me this wasn't enough. In the end I just removed the whole ~/.cache folder because it was owned by root with sudo rm -fr ~/.cache

Then from my non-sudo account, reinstalled bower with global: npm install -g bower

Now I can create app with foundation-apps new appName and watch the app and no errors are thrown.

Hope it helps if you're new to all this like I am.

You commented on Robert North's post about 4 years

After installing the bower version of angular-scroll, in my gulpfile.js I added the following to the appsJS array:

  'bower_components/angular-scroll/angular-scroll.js',

Instead of declaring 'angular-scroll' with angular.module, I took that out and just kept the dependency 'duScroll'.

Then I was able to use angular-scrolls in my app.

I'm not sure if this is the best way to do it, but it worked.

You commented on Robert North's post about 4 years

I see now. Thanks Rafi!

This is my first time using states like this - I've always done this sort of thing manually with jquery / ajax. Incredible how much easier this makes it.

Posts Followed


Following

  • No Content

Followers

  • No Content