/node_template_project_exp

Experimental template projects for node

Primary LanguageJavaScriptOtherNOASSERTION

Purpose

Template project for quick starting a node.js based project.

How-to

  1. Under the root directory, remove the .git folder in order to avoid mingling with not project git commits. Either delete the folder manually or rm -rf .git in the CMD.

  2. git init to create your own project that is version controlled by Git. Commit to get the first source code check-in git commit -am "init commit".

  3. npm install to install the module required by the build sytem, gulpjs.

  4. gulp dev to start the live build in your development environment. To build for the production environment, run gulp build --production.

  5. Replace the content of README.md with your project description.

Coding in fun!

TODO

  • TODO: migrate the gulp tasks updates/changes from shake_ex project (on the gitbucket.com )

  • TOFIX: the newly added images are not picked up by tasks!

  • TODO: 2016.7.26 should allow interruption of the build in case new tasks of the same kind!

  • SUG: gulp-notify can use Mac OS notification center for desktop notification.

  • TODO: gulp build not quit after task, is it hold on by Watch task?

  • TODO:ESP: how to minitoring the change if new files/folders are copied or when removing?

  • TODO: see if the watchify task can auto reload after a error code change

  • TODO: How to launch specific path html when running a local server?

  • TODO: react code, transforming

  • TODO: jslint task for code analysis

  • TODO: make 'build' tasks not watchified!

  • TODO: the image/font/js/css/audio and other unspecified asset folder requires explicit rules on file copying, see if we can --> IDEA: is it possible to create flatten assets folders referencing the files in each folder in the build?

  • TODO: multiple scss files preprocess

  • TODO: minimize the node_modules required

  • TODO: TROUBLE_SHOOTING, gulp-sass not installed correctly using 'npm install gulp-sass --save-dev'

  • TODO: in asset(html, css, javascript) building, try to refactor the 'browserSync.reload({ stream: true })' out of each task.

  • Q: In 'watch' task, why 'browser-sync reload' is executed before 'html' changes? A:

  • SUG: research to find a way (e.g. interactive session or a config file with commenting/uncommenting) in order to generate least possible node modules inside package.json

  • SUG: make it into a generator

  • DONE: concat files, js, css or other resources files NOTE: not REF: http://stackoverflow.com/questions/24100357/html-reloading-using-browsersync-in-gulp HINT: http://stackoverflow.com/questions/17970845/are-there-any-disadvantages-to-concatenating-all-javascript-files-including-ven HINT: consider using webpack?

  • DONE: tasks dependencies, sequence enforcement NOTE: use task dependency like task("task1", ["task_before_step"]) or use module 'run-sequence'

  • DONE: make a dist task with timestamp

  • DONE: clean sass, scss cache folders NOTE: no need to clean, just for fast rebuilding.

Q & A

# example code
var os = require('os');
var open = require('gulp-open');
var browser = os.platform() === 'linux' ? 'google-chrome' : (
  os.platform() === 'darwin' ? 'google chrome' : (
  os.platform() === 'win32' ? 'chrome' : 'firefox'));
gulp.src('./package.json').pipe(open({app: 'chrome'}));

  • Q: For browserSync() call, what's the point of ['./build/**/.'] before the options? Even the file changes, not task will be carried out except reporting file changed. IDEA: hook up event? A:

  • Q: how to bundle vendors' javascript library? A: See task 'vendor-js'.

  • Q: What's all the options for autoprefix? e.g. ``` // https://webstoemp.com/blog/gulp-setup/ var AUTOPREFIXER_BROWSERS = [ 'last 3 versions', 'ie >= 8', 'ios >= 7', 'android >= 4.4', 'bb >= 10' ];

  A:



## Trouble Shooting

* When 'npm install', node-sass hangs the installation, TODO:fix by manual build, ref, ???