Menu icon Foundation
Issues Surrounding Foundation CLI v6.3.0 and Babel

Hello,

We are refactoring an existing web application from LESS/GRUNT/FOUNDATION to using SASS/GULP/FOUNDATION Zurb Template CLI. (Foundation is v6.3.1, Foundation ZURB Template is v1.0.0)

 

First issue surrounded Foundation CLI using babel...it was transpiling "this" into "undefined" so I went ahead and added the following to the $.babel gulp plugin:

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel({
        ignore: [
            './src/**/*.js',
            './src/**/*.min.js',
            './bower_components/handlebars/handlebars.min.js',
            './bower_components/urijs/src/URI.min.js'
        ]
    }))
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

 

Everything seems to be correctly concatenated into a single app.js that is referenced from the app, however, code that is proven to be working in the prexisting version of the site that we want to refactor no longer works after having it run through Foundation CLI's "foundation watch" workflow. Could this be caused by Babel? None of the application code has been tampered with and the order in which they are fed into GULP match the order in which they were fed into the previous projects GRUNT.

Would it be beneficial to remove the $.babel() invocation completely? I do not believe any of our JS contains any code that requires Babel compilation. Does Foundation rely on this gulpfile to build any of its Babel-related files? Would removing this babel invocation disrupt Foundation CLI's operation or break Foundation?

 

If it helps, below is our config.yml file for Foundation CLI with irrelelvant parts commented out:

# Your project's server will run on localhost:xxxx at this port
PORT: 8000

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"
  - "ios >= 7"

# UnCSS will use these settings
UNCSS_OPTIONS:
  html:
    - "src/**/*.html"
  ignore:
    - !!js/regexp .foundation-mq
    - !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
  # Path to dist folder
  dist: "dist"  
  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "src/assets/**/*"
    - "!src/assets/{img,js,scss}/**/*"
  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "bower_components/foundation-sites/scss"
    - "bower_components/motion-ui/src"
  # Paths to JavaScript libraries, which are combined into one file
  javascript:
    # Vendor Files ############################################################
    - "src/assets/js/vendors/jquery.js"
    - "src/assets/js/vendors/jquery.maskedinput.min.js"
    - "bower_components/foundation-sites/dist/js/foundation.min.js"
    - "bower_components/what-input/dist/what-input.js"
    - "src/assets/js/vendors/gmaps.js"
    - "bower_components/motion-ui/dist/motion-ui.js"
    - "src/assets/js/vendors/slick.js"
    - "src/assets/js/vendors/detectmobilebrowser.js"
       #
       # other files omitted for brevity
       #
    # Local Files #############################################################
    - "src/assets/js/custom/constants.js"
    - "src/assets/js/custom/global.js"
       #
       # other files omitted for brevity
       #
    # Paths to your own project code are here
    - "src/assets/js/!(app).js"
    - "src/assets/js/app.js"
  
   

 

And in our packages.json, I tried forcing babel to interpret files as scripts:

"babel": {
        "presets": ["es2015",{ 
                "modules":  false
        }],
        "parserOpts": { "sourceType": "script" }
    },

 

 

Thanks.

 

 

 

 

foundation-cliBabeljavascriptFoundationgulpgulpfiletranspilingYAMLconfigconfigurationFoundation for Siteszurbscripts

Hello,

We are refactoring an existing web application from LESS/GRUNT/FOUNDATION to using SASS/GULP/FOUNDATION Zurb Template CLI. (Foundation is v6.3.1, Foundation ZURB Template is v1.0.0)

 

First issue surrounded Foundation CLI using babel...it was transpiling "this" into "undefined" so I went ahead and added the following to the $.babel gulp plugin:

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel({
        ignore: [
            './src/**/*.js',
            './src/**/*.min.js',
            './bower_components/handlebars/handlebars.min.js',
            './bower_components/urijs/src/URI.min.js'
        ]
    }))
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

 

Everything seems to be correctly concatenated into a single app.js that is referenced from the app, however, code that is proven to be working in the prexisting version of the site that we want to refactor no longer works after having it run through Foundation CLI's "foundation watch" workflow. Could this be caused by Babel? None of the application code has been tampered with and the order in which they are fed into GULP match the order in which they were fed into the previous projects GRUNT.

Would it be beneficial to remove the $.babel() invocation completely? I do not believe any of our JS contains any code that requires Babel compilation. Does Foundation rely on this gulpfile to build any of its Babel-related files? Would removing this babel invocation disrupt Foundation CLI's operation or break Foundation?

 

If it helps, below is our config.yml file for Foundation CLI with irrelelvant parts commented out:

# Your project's server will run on localhost:xxxx at this port
PORT: 8000

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"
  - "ios >= 7"

# UnCSS will use these settings
UNCSS_OPTIONS:
  html:
    - "src/**/*.html"
  ignore:
    - !!js/regexp .foundation-mq
    - !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
  # Path to dist folder
  dist: "dist"  
  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "src/assets/**/*"
    - "!src/assets/{img,js,scss}/**/*"
  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "bower_components/foundation-sites/scss"
    - "bower_components/motion-ui/src"
  # Paths to JavaScript libraries, which are combined into one file
  javascript:
    # Vendor Files ############################################################
    - "src/assets/js/vendors/jquery.js"
    - "src/assets/js/vendors/jquery.maskedinput.min.js"
    - "bower_components/foundation-sites/dist/js/foundation.min.js"
    - "bower_components/what-input/dist/what-input.js"
    - "src/assets/js/vendors/gmaps.js"
    - "bower_components/motion-ui/dist/motion-ui.js"
    - "src/assets/js/vendors/slick.js"
    - "src/assets/js/vendors/detectmobilebrowser.js"
       #
       # other files omitted for brevity
       #
    # Local Files #############################################################
    - "src/assets/js/custom/constants.js"
    - "src/assets/js/custom/global.js"
       #
       # other files omitted for brevity
       #
    # Paths to your own project code are here
    - "src/assets/js/!(app).js"
    - "src/assets/js/app.js"
  
   

 

And in our packages.json, I tried forcing babel to interpret files as scripts:

"babel": {
        "presets": ["es2015",{ 
                "modules":  false
        }],
        "parserOpts": { "sourceType": "script" }
    },

 

 

Thanks.

 

 

 

 

Jatin popli almost 2 years ago

Issues surrounding foundation may be holding the process to develop , but crib wont wait for you as you win a deal your will get a crib also free cribbage online is available now.