Node.js and Gulp.js Basics June 27th, 2015

Node.js

  1. Install npm globally if you don’t already have it (check versions with node -v and npm -v)
  2. Run npm init command to initialize the package.json file to provide information about the project and help manage the dependencies… example… 
    {
    "name": "my_project",
    "version": "0.0.0",
    "devDependencies": {
        "gulp": "~3.8.8"
    },
    "dependencies": {
        "jquery": "~2.1.3",
        "react": "~0.13.1"
    }
}
    • devDependencies: These are the dependencies that are only intended for development and testing of your module. The dependencies will be installed automatically unless the NODE_ENV=production environment variable has been set. If this is the case you can still install these packages using npm install –dev
    • dependencies: An object which contains the dependencies of your package; automatically installed when people install your package with npm install. The key of the object is the name of the package and the value is a valid semver range.

Gulp.js

  • Gulp is the new Grunt; faster and less config
  • Install Gulp globally with npm install -g gulp
  • Install Gulp in your project directory with npm install –save-dev gulp and Node will add the requirement to your package.json file under devDependencies (leave off the -dev to save it to dependencies)
  • Install required plugins for typical front-end dev stuff npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename –save-dev
  • Gulp only has 5 methods; task, run, watch, src, and dest… all you need
    • gulp.task defines your tasks. Its arguments are name, deps and fn.  Where name is a string, deps is an array of task names, and fn is the function that performs your task. Deps is optional.
    • gulp.src points to the files we want to use. It’s parameters are globs and an optional options object. It uses .pipe for chaining it’s output into other plugins.
    • gulp.dest points to the output folder we want to write files to.
    • gulp.watch like gulp.task has two main forms. Both of which return an EventEmitter that emits change events. The first of which takes a glob, an optional options object, and an array of tasks as it’s parameters.
  • Gulp Tasks in Laravel Easily with Elixir
    • Elixir is configurable:
      • production – checks if the current environment is set to production, defaults to true
      • assetsDir – assets directory path, default is resources/assets
      • cssOutput – default output directory for all css files, default is public/css
      • jsOutput – default output directory for all js files, default is public/js
      • sourcemaps – if sourcemaps should be generated, default is true
    • Assumes your files are in… and outputs to ==>…
      • resources/assets/less ==> public/css
      • resources/assets/sass ==> public/css
      • resources/assets/coffee ==> public/js
    • Has .version() for cache-busting
    • Override input and output… 
      mix.scripts(
    ['module1.js', 'module2.js'],
    'path/to/output/file.js',
    'path/to/source'
);

Resources