parched-tasks-webapp

Uses features from Parched and browserify for pain free development times. Bower is also supported, though not given the exact same treatement as app/ or vendor/.

You do have to structure your app a certain way:

app/
├── assets/
├── scripts/
├── styles/
└── views/
vendor/
├── assets/
├── scripts/
├── styles/
└── views/

However, given this:

npm install --save gulp parched parched-tasks-webapp
# Okay now we will install some plugins
npm install --save parched-coffee \
    parched-jade \
    parched-minify-css \
    parched-sass \
    parched-svg2png \
    parched-uglify \
    parched-webfont

... and a Gulpfile.js containing:

Parched.setup({
  gulp: gulp,

  parchedWillBuild: function(done) {
    console.log('Before');
    done();
  },

  parchedDidBuild: function(done) {
    console.log('After');
    done();
  }
});

... you have a process that will:

• Support bower dependencies.
• Support coffeescript (in vendor/scripts/ and browserify).
• Support jade (in app/views/, vendor/views/ and browserify).
• Support sass (in app/styles/ and vendor/styles/).
• Support ordering of any concat'd files via before and after properties.
• Build a webfont based on .svg files in app/assets/glyphs/.
• Build both a retina and non-retina spritemap based on .svg files in app/assets/sprites/.
• Minify javascript in production.
• Minify css in production.
• Error hard in production.
• Use browserSync in development.
• Stay out of your way.
• Allow you to intervene at pretty much any point.

Usage

To cleanup public/ and tmp/:

gulp parched-clean

To watch files in development

gulp parched-watch

To build everything:

gulp parched-build

To build and minify everything:

NODE_ENV=production gulp parched-build

Bundles

parched-tasks-webapp has a concept of "bundles". Directories of files are considered to be a "bundle", provided there is some configuration.

The default bundle is app, and its configuration looks like:

Parched.setup({
  webapp: {
    bundles: {
      app: {
        src: './app/',
        dest: './public/',
        shouldCopyVendor: true,
        shouldConcatVendor: false
      }
    }
  }
})

What this means is scripts in ./app/ will be built as ./public/app.js, styles will be concated to ./public/app.css, and any assets / views will go to ./public/.

The src property will default to the bundle name and if no bundles specify shouldCopyVendor then it is set for you on the first bundle. Set shouldConcatVendor if you would like the vendor scripts and styles to be concated to the beginning of the bundle files.

Note for Parched plugin authors

Because this behavior is specific to parched-tasks-webapp and messes up any generic paths your workflow may assume, check for streamContext.bundleName in your plugins method.

export default function (Parched) {
  Parched.createPlugin({
    displayName: 'my-awesome-plugin',
    
    transform (streamContext) {
      let src = '**/*.svg'
      let dest = 'public/'
      
      if (streamContext.bundleName) {
        // we are being called by `parched-tasks-webapp`
        src = `${streamContext.bundleSrc}/**/*.js`
        dest = streamContext.bundleDest
      }
    }
  })
}