@coldfrontlabs/gulp-templates
Templates for quick gulp task set-up.
Last updated 7 months ago by nickdjm .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @coldfrontlabs/gulp-templates 
SYNC missed versions from official npm registry.

@coldfrontlabs/gulp-templates

NPM Version License

Templates for quick gulp task set-up.

This project assumes users have a basic understanding of how Gulp works. If you require more information on the basics of Gulp, please read the official documentation.

Installation

npm install -D gulp
npm install -D @coldfrontlabs/gulp-templates

Features

CSS

JavaScript

Libraries/Dependencies

Sass/SCSS

Upgrading major versions?

Check out the new upgrade guide!

Sample gulpfile.js

This file will give you a basic example of how to use the templates.

// Get gulp components and templates.
const { series } = require('gulp')
const { js } = require('@coldfrontlabs/gulp-templates')

const paths = {
  js: {
    src: 'src/js',
    dest: 'dist/js',
    selector: '**/*.js'
  },
  min: '**/*.min.*'
}

/**
 * Lints all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
const lintScripts = () => js.lint({
  source: `${paths.js.src}/${paths.js.selector}`
})
lintScripts.description = 'Lints all JS files.'

/**
 * Lints and fixes all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
const lintScriptsFix = () => js.fix({
  source: `${paths.js.src}/${paths.js.selector}`
})
lintScriptsFix.description = 'Lints and fixes all JS files.'

/**
 * Compiles all JS files using Babel.
 *
 * @returns {Object} - Gulp stream.
 */
const compileScripts = () => js.compile({
  source: `${paths.js.src}/${paths.js.selector}`,
  destination: paths.js.dest
})
compileScripts.description = 'Compiles all JS files using Babel.'

/**
 * Minifies all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
const minifyScripts = () => js.minify({
  source: [`${paths.js.dest}/${paths.js.selector}`, `!${paths.min}`],
  destination: paths.js.dest
})
minifyScripts.description = 'Minifies all JS files.'

/**
 * Lints, compiles, and minifies all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
const buildDev = series(lintScripts, compileScripts, minifyScripts)
buildDev.description = 'Lints, compiles, and minifies all JS files.'

/**
 * Compiles and minifies all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
const buildProd = series(compileScripts, minifyScripts)
buildProd.description = 'Compiles and minifies all JS files.'

// Export linting tasks.
exports.lintScripts = lintScripts
exports.lintScriptsFix = lintScriptsFix

// Export compiling task.
exports.compileScripts = compileScripts

// Export minifying task.
exports.minifyScripts = minifyScripts

// Export build tasks.
exports.buildDev = buildDev
exports.buildProd = buildProd

// Export default task.
exports.default = buildProd

Using the latest JavaScript version

If you want to use the latest greatest JavaScript, follow the setup instructions for Gulp on the official package.

Here is the example from above written in ES2015.

// Get gulp components and templates.
import { series } from 'gulp'
import { js } from '@coldfrontlabs/gulp-templates'

const paths = {
  js: {
    src: 'src/js',
    dest: 'dist/js',
    selector: '**/*.js'
  },
  min: '**/*.min.*'
}

/**
 * Lints all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
export const lintScripts = () => js.lint({
  source: `${paths.js.src}/${paths.js.selector}`
})
lintScripts.description = 'Lints all JS files.'

/**
 * Lints and fixes all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
export const lintScriptsFix = () => js.fix({
  source: `${paths.js.src}/${paths.js.selector}`
})
lintScriptsFix.description = 'Lints and fixes all JS files.'

/**
 * Compiles all JS files using Babel.
 *
 * @returns {Object} - Gulp stream.
 */
export const compileScripts = () => js.compile({
  source: `${paths.js.src}/${paths.js.selector}`,
  destination: paths.js.dest
})
compileScripts.description = 'Compiles all JS files using Babel.'

/**
 * Minifies all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
export const minifyScripts = () => js.minify({
  source: [`${paths.js.dest}/${paths.js.selector}`, `!${paths.min}`],
  destination: paths.js.dest
})
minifyScripts.description = 'Minifies all JS files.'

/**
 * Lints, compiles, and minifies all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
export const buildDev = series(lintScripts, compileScripts, minifyScripts)
buildDev.description = 'Lints, compiles, and minifies all JS files.'

/**
 * Compiles and minifies all JS files.
 *
 * @returns {Object} - Gulp stream.
 */
export const buildProd = series(compileScripts, minifyScripts)
buildProd.description = 'Compiles and minifies all JS files.'

// Create default tasks
export default buildProd

More examples can be found here.

Changelog

License

Current Tags

  • 2.0.0-alpha.0                                ...           alpha (7 months ago)
  • 2.0.0                                ...           latest (7 months ago)

8 Versions

  • 2.0.0                                ...           7 months ago
  • 2.0.0-alpha.0                                ...           7 months ago
  • 1.2.0                                ...           8 months ago
  • 1.1.3                                ...           8 months ago
  • 1.1.2                                ...           10 months ago
  • 1.1.1                                ...           10 months ago
  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 8
Last Day 0
Last Week 8
Last Month 2
Dependencies (16)
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |