carloscuesta/starterkit

A Front End development Gulp.js based workflow. 🚀

Hey! I'm Carlos Cuesta 👋🏼

I'm a Front End Engineer based in Barcelona, that loves to code and build products with a delightful user experience. I love working in between product, engineering and developer experience, currently at N26.

starterkit's Issues

throw er; // Unhandled 'error' event

When I run 'gulp' I get this:

revod at Revods-iMac in /Volumes/Files/Development/Frontend-Boilerplate on master ✗               [752f793]  12:25
> gulp
[12:26:03] Requiring external module babel-register
[12:26:05] Using gulpfile /Volumes/Files/Development/Frontend-Boilerplate/gulpfile.babel.js
[12:26:05] Starting 'default'...
[12:26:05] Starting 'templates'...
[12:26:05] Starting 'styles'...
[12:26:05] Starting 'scripts'...
[12:26:05] Starting 'images'...
[12:26:05] Finished 'images' after 971 μs
[12:26:05] Starting 'serve'...
[12:26:05] Finished 'serve' after 40 ms
[12:26:05] Finished 'default' after 61 ms
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.20.160:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.20.160:3001
 ---------------------------------------
[BS] Serving files from: ./dist/

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: spawn /Volumes/Files/Development/Frontend-Boilerplate/node_modules/optipng-bin/vendor/optipng ENOENT
    at exports._errnoException (util.js:1026:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:359:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Add: Tests, Build System and Continuous Integration.

Using xo add linting to the gulpfile.js. Create a test npm script that runs xo and the default gulp task to check if everything is working properly and add travis-ci.

To Do:

• Install xo and add rules.
• Fix xo issues.
• Create a npm test script.
• Add .travis.yml and CI.
• Add build status badge to the readme.

README Images

Add surge integration.

Add surge integration to the gulpfile.js to provide an easy way to deploy the static dist/ folder instead of using FTP server only.

• Update gulpfile.js
• Add surge dependencies to the package.json.
• Update docs and readme.

Uncaught ReferenceError: require is not defined on ES6 Import of node module

Getting an reference error error when I try to import any ES6 module in index.js

import LazyLoad from "vanilla-lazyload";

(This is a terrific project, easy to fall out of touch when you are always using the create react app cli!)

Gulp Critical task does not wokr

Got a problem with Gulp critical task.

Clone the repo >> run npm install >> run gulp default task >> Everything is ok and working.

then locally run command "gulp critical" just for testing

here got an erro in CLI:

TypeError: (0 , _critical2.default) is not a function
at Gulp. (/Users/MYNAME/MYFOLDER/starterkit/gulpfile.babel.js:247:9)
at module.exports

....

did i do something wrong?
or is there is a bug?

help :)

gulp serve: Failed to load external module babel/register

Followed the directions in README.md and I receive this error when I run gulp:

$ gulp
[11:26:22] Failed to load external module babel/register
[11:26:22] Requiring external module babel/register

It does, however, serve the boilerplate welcome page successfully.
And npm i --save-dev babel do not fix it.

System/Software Information

Linux NUC6i5SYK 4.15.0-20-generic #21-Ubuntu SMP Tue Apr 24 06:16:15 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
linux { http_parser: '2.8.0',
  node: '10.1.0',
  v8: '6.6.346.27-node.6',
  uv: '1.20.2',
  zlib: '1.2.11',
  ares: '1.14.0',
  modules: '64',
  nghttp2: '1.29.0',
  napi: '3',
  openssl: '1.1.0h',
  icu: '61.1',
  unicode: '10.0',
  cldr: '33.0',
  tz: '2018c' }

npm -v
5.6.0

$ gulp -v
[00:27:27] Failed to load external module @babel/register
[00:27:27] Requiring external module babel-register
[00:27:27] CLI version 2.0.1
[00:27:27] Local version 3.9.1

I attempted a clean install, and retraced every step for a second time in a new directory and I am still encountering the same error.

I must note that I am new to Babel, so I have no idea whether or not this has any consequence.

Use ES6 in the gulpfile.js

Use ES6 for the gulpfile.js

To Do:

• Create .babelrc with the es2015 preset.
• Install the next dependencies: npm i --save-dev babel-core npm i --save-dev babel-preset-es2015
• Rename gulpfile.js => gulpfile.babel.js
• Move the code to ES6.
• Update linter rules to enable es2015 syntax.

Speed up the CI build

Speed up the CI build, update the package.json and move the gulp dependencies to dependencies instead of devDependencies. Move xo to devDependencies.

Customize the install step at the .travis.yml only installing the devDeps

npm install --only=dev

Optimize build file process

Using gulp-changed, modify the tasks at the starterkit gulpfile.js to only build those files that have been changed.

To Do:

• Add gulp-changed as a devDependecy.
• Require gulp-changed in gulpfile.js
• Update tasks: styles, scripts, templates

⚠️ Test the behavior when changing pug _file.pug includes.