workflow


Gulp
combine javascripts in one file, css files, images, mustache, ...
moustache.js
for javascript templating



 Grunt JS uses a JSOM file, to create and manage your tasks. While Gulp and Broccoli use regular JavaScript. Now, I prefer being able to use JavaScript, since that's a little more flexible in my opinion. 
Gulp uses the concept of pipes, so you take one file, process it through a plug-in, and then send the output of that file to another plug-in. Broccoli on the other hand, uses trees which are directories and sub-directories of files.



npm install -g gulp


$ vim package.json
{
  "name": "workflows",
  "version": "0.0.1",
  "description": "A project to showcase workflows",
  "repository": {
    "type": "git",
    "url": "https://github.com/planetoftheweb/workflows.git"
  },
  "author": "Ray Villalobos",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-util": "^2.2.14",
    "gulp-coffee": "^1.4.3"             for processing coffee files
  }
}

$ vim gulpfile.js
var gulp = require('gulp'),
    gutil = require('gulp-util'),
    coffee = require('gulp-coffee');

var coffeeSources = ['components/coffee/tagline.coffee'];

gulp.task('coffee', function() {      // coffee is task name
  gulp.src(coffeeSources)
    .pipe(coffee({ bare: true })
      .on('error', gutil.log))
    .pipe(gulp.dest('components/scripts'))
});

$ gulp coffee

----------------------------------------------

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    coffee = require('gulp-coffee'),
    concat = require('gulp-concat');

var coffeeSources = ['components/coffee/tagline.coffee'];
var jsSources = [
  'components/scripts/rclick.js',
  'components/scripts/pixgrid.js',
  'components/scripts/tagline.js',
  'components/scripts/template.js'
];

gulp.task('coffee', function() {
  gulp.src(coffeeSources)
    .pipe(coffee({ bare: true })
      .on('error', gutil.log))
    .pipe(gulp.dest('components/scripts'))
});

gulp.task('js', function() {     // combine javascript files into script.js in directory /build/dev/js
  gulp.src(jsSources)
    .pipe(concat('script.js'))
    .pipe(gulp.dest('builds/development/js'))
});


 very, very similar. And this is one of the things I really like about Gulp, because when you're working with grunt, sometimes the different tasks do things in different ways. So here, we do the same thing. We specify a source in both tasks. Right? Then we pipe it through some sort of command or method, which we do over here as well, and then we send it to a destination in both places.


browserify
Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node. Recursively bundle up all the required modules starting at main.js into a single file called bundle.js:
browserify main.js -o bundle.js
Browserify parses the AST for require() calls to traverse the entire dependency graph of your project. Just drop a single <script> tag into your html and you're done!
<script src="bundle.js"></script>


sass and compass for css
variables, nesting, partials, mixins, extend/inherit, math-operators


Subpages (1): webpack
Comments