Skip to content

Downstream projects can now require grunt and gulp tasks, no need to copy them anymore. #244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tbouron wants to merge 3 commits into from
Closed

Downstream projects can now require grunt and gulp tasks, no need to copy them anymore. #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b188dc0
Downstream projects can now require grunt and gulp tasks, no need to …
tbouron Feb 9, 2016
30ec907
Breakdown grunt|gulp tasks, update README.md and unit tests now run t…
tbouron Feb 10, 2016
b4ce664
Merge branch 'master' into require-grunt-gulp
tbouron Feb 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 5 additions & 133 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,139 +1,11 @@
module.exports = function(grunt) {

var path = require('path');
var config = require('./config.json');

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
stripBanners: true,
banner: '/* \n * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy") %> \n * \n * <%= pkg.author %>, and the web community.\n * Licensed under the <%= pkg.license %> license. \n * \n * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. \n *\n */\n\n',
},
patternlab: {
src: './builder/patternlab.js',
dest: './builder/patternlab.js'
},
object_factory: {
src: './builder/object_factory.js',
dest: './builder/object_factory.js'
},
lineage: {
src: './builder/lineage_hunter.js',
dest: './builder/lineage_hunter.js'
},
media_hunter: {
src: './builder/media_hunter.js',
dest: './builder/media_hunter.js'
},
patternlab_grunt: {
src: './builder/patternlab_grunt.js',
dest: './builder/patternlab_grunt.js'
},
patternlab_gulp: {
src: './builder/patternlab_gulp.js',
dest: './builder/patternlab_gulp.js'
},
parameter_hunter: {
src: './builder/parameter_hunter.js',
dest: './builder/parameter_hunter.js'
},
pattern_exporter: {
src: './builder/pattern_exporter.js',
dest: './builder/pattern_exporter.js'
},
pattern_assembler: {
src: './builder/pattern_assembler.js',
dest: './builder/pattern_assembler.js'
},
pseudopattern_hunter: {
src: './builder/pseudopattern_hunter.js',
dest: './builder/pseudopattern_hunter.js'
},
list_item_hunter: {
src: './builder/list_item_hunter.js',
dest: './builder/list_item_hunter.js'
},
style_modifier_hunter: {
src: './builder/style_modifier_hunter.js',
dest: './builder/style_modifier_hunter.js'
}
},
copy: {
main: {
files: [
{ expand: true, cwd: path.resolve(paths().source.js), src: '*.js', dest: path.resolve(paths().public.js) },
{ expand: true, cwd: path.resolve(paths().source.css), src: '*.css', dest: path.resolve(paths().public.css) },
{ expand: true, cwd: path.resolve(paths().source.images), src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: path.resolve(paths().public.images) },
{ expand: true, cwd: path.resolve(paths().source.fonts), src: '*', dest: path.resolve(paths().public.fonts) },
{ expand: true, cwd: path.resolve(paths().source.data), src: 'annotations.js', dest: path.resolve(paths().public.data) }
]
},
styleguide: {
files: [
{ expand: true, cwd: path.resolve(paths().source.styleguide), src: ['*.*', '**/*.*'], dest: path.resolve(paths().public.styleguide) }
]
}
},
watch: {
all: {
files: [
path.resolve(paths().source.css + '**/*.css'),
path.resolve(paths().source.styleguide + 'css/*.css'),
path.resolve(paths().source.patterns + '**/*.mustache'),
path.resolve(paths().source.patterns + '**/*.json'),
path.resolve(paths().source.fonts + '/*'),
path.resolve(paths().source.images + '/*'),
path.resolve(paths().source.data + '*.json')
],
tasks: ['default', 'bsReload:css']
}
},
nodeunit: {
all: ['test/*_tests.js']
},
browserSync: {
dev: {
options: {
server: path.resolve(paths().public.root),
watchTask: true,
watchOptions: {
ignoreInitial: true,
ignored: '*.html'
},
plugins: [
{
module: 'bs-html-injector',
options: {
files: [path.resolve(paths().public.root + '/index.html'), path.resolve(paths().public.styleguide + '/styleguide.html')]
}
}
]
}
}
},
bsReload: {
css: path.resolve(paths().public.root + '**/*.css')
}
});
grunt.initConfig({});

function paths () {
return require('./config.json').paths;
}

// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

//load the patternlab task
grunt.task.loadTasks('./builder/');

grunt.registerTask('default', ['patternlab', 'copy:main', 'copy:styleguide']);

//travis CI task
grunt.registerTask('travis', ['nodeunit', 'patternlab']);

grunt.registerTask('serve', ['patternlab', 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']);

grunt.registerTask('build', ['nodeunit', 'concat']);
// Load grunt tasks to the current grunt and inject the local configuration
require('./builder/grunt-build')(grunt, config);

grunt.registerTask('default', ['patternlab', 'copy:pl_main', 'copy:pl_styleguide']);
};
25 changes: 11 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,37 +22,34 @@ Make sure you are running your terminal/command line session as administrator. T

### Choose Your Adventure! Now Vanilla, Grunt & Gulp

This repository ships with two `package.json` files, a `Gruntfile.js`, and a `gulpfile.js`. The default is grunt currently. The core builder is not dependent on either.
This repository ships a `Gruntfile.js`, and a `gulpfile.js`. The default is grunt currently. The core builder and tests are not dependent on either.

### Getting Started - Grunt

To run patternlab-node using grunt, do the following in the directory you downloaded and extracted the zipped release:

1. Run `npm install` from the command line
2. Optionally, delete `package.gulp.json`, `gulpfile.js`, and `builder/patternlab_gulp.js` files if you are certain you don't need it.
* Not deleting `builder/patternlab_gulp.js` may cause a harmless error when running grunt. Delete it.
3. Run `grunt` or `grunt serve` from the command line
2. Optionally, delete `gulpfile.js`, `builder/gulp-core.js`, `builder/gulp-build.js` and `builder/gulp-extra.js` files if you are certain you don't need it.
3. Run `grunt` or `grunt pl:serve` from the command line

This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `grunt serve` to have BrowserSync spin up and serve the files to you.
This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `grunt pl:serve` to have BrowserSync spin up and serve the files to you.

### Getting Started - Gulp

To run patternlab-node using gulp, you need to swap out the default grunt configuration. Do the following in the directory you downloaded and extracted the zipped release:

1. Rename `package.json` to `package.grunt.json` or delete it if you don't intend on going back
2. Rename `package.gulp.json` to `package.json`
3. Run `npm install` from the command line
4. Run `gulp` or `gulp serve` from the command line
1. Run `npm install` from the command line
2. Optionally, delete `Gruntfile.js`, `builder/grunt-core.js` and `builder/grunt-build.js` files if you are certain you don't need it.
4. Run `gulp` or `gulp pl:serve` from the command line

This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `gulp serve` to have BrowserSync spin up and serve the files to you.
This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `gulp pl:serve` to have BrowserSync spin up and serve the files to you.

### There and Back Again, or Switching Between Grunt and Gulp

It's not expected to toggle between the two build systems, but for those migrating between the two configs, here's some general guidelines:

* Make sure your `package.json` files are correct per the Getting Started sections.
* Run `npm cache clear` before installation
* Delete the contents of `./node_modules` if you want a cleaner installation.
* Don't delete any files related to grunt or gulp. That's it!
* The `package.json` includes all dependencies for gulp **and** grunt so you can switch between the two without doing anything.
* Regarding speed, Gulp is faster. BrowserSync takes a bit longer than the old static server to spin up, but its capabilities far outweigh the startup cost.

### Upgrading
Expand All @@ -78,7 +75,7 @@ Get more information about patternlab-node, pattern lab in general, and where to
### Further Configuration

##### Watching Changes
To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt|gulp watch` or `grunt|gulp serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy.
To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt watch|gulp pl:connect` or `grunt|gulp pl:serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy.

##### Configurable Paths
Pattern Lab Node ships with a particular source and public workflow intended to separate the code you work on with the code generated for consumption elsewhere. If you wish to change any paths, you may do so within `config.json`. The contents are here:
Expand Down
167 changes: 167 additions & 0 deletions builder/grunt-build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
/*
* patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
*
* Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
*
*/

// IMPORTANT: Remember that `./` matches the root of the grunt file that requires this one!
// However, this does not apply to the `require('...')`
module.exports = function(grunt, config) {
var path = require('path');

// Load CORE tasks
require('./grunt-core')(grunt, config);

// Load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

// Project configuration.
grunt.config.merge({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
stripBanners: true,
banner: '/* \n * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy") %> \n * \n * <%= pkg.author %>, and the web community.\n * Licensed under the <%= pkg.license %> license. \n * \n * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. \n *\n */\n\n',
},
pl_patternlab: {
src: './builder/patternlab.js',
dest: './builder/patternlab.js'
},
pl_object_factory: {
src: './builder/object_factory.js',
dest: './builder/object_factory.js'
},
pl_lineage: {
src: './builder/lineage_hunter.js',
dest: './builder/lineage_hunter.js'
},
pl_media_hunter: {
src: './builder/media_hunter.js',
dest: './builder/media_hunter.js'
},
pl_patternlab_grunt: {
src: './builder/patternlab_grunt.js',
dest: './builder/patternlab_grunt.js'
},
pl_patternlab_gulp: {
src: './builder/patternlab_gulp.js',
dest: './builder/patternlab_gulp.js'
},
pl_parameter_hunter: {
src: './builder/parameter_hunter.js',
dest: './builder/parameter_hunter.js'
},
pl_pattern_exporter: {
src: './builder/pattern_exporter.js',
dest: './builder/pattern_exporter.js'
},
pl_pattern_assembler: {
src: './builder/pattern_assembler.js',
dest: './builder/pattern_assembler.js'
},
pl_pseudopattern_hunter: {
src: './builder/pseudopattern_hunter.js',
dest: './builder/pseudopattern_hunter.js'
},
pl_list_item_hunter: {
src: './builder/list_item_hunter.js',
dest: './builder/list_item_hunter.js'
},
pl_style_modifier_hunter: {
src: './builder/style_modifier_hunter.js',
dest: './builder/style_modifier_hunter.js'
}
},
copy: {
pl_main: {
files: [
{
expand: true,
cwd: path.resolve(config.paths.source.js),
src: '*.js',
dest: path.resolve(config.paths.public.js)
},
{
expand: true,
cwd: path.resolve(config.paths.source.css),
src: '*.css',
dest: path.resolve(config.paths.public.css)
},
{
expand: true,
cwd: path.resolve(config.paths.source.images),
src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'],
dest: path.resolve(config.paths.public.images)
},
{
expand: true,
cwd: path.resolve(config.paths.source.fonts),
src: '*',
dest: path.resolve(config.paths.public.fonts)
},
{
expand: true,
cwd: path.resolve(config.paths.source.data),
src: 'annotations.js',
dest: path.resolve(config.paths.public.data)
}
]
},
pl_styleguide: {
files: [
{
expand: true,
cwd: path.resolve(config.paths.source.styleguide),
src: ['*.*', '**/*.*'],
dest: path.resolve(config.paths.public.styleguide)
}
]
}
},
watch: {
pl_all: {
files: [
path.resolve(config.paths.source.css + '**/*.css'),
path.resolve(config.paths.source.styleguide + 'css/*.css'),
path.resolve(config.paths.source.patterns + '**/*.mustache'),
path.resolve(config.paths.source.patterns + '**/*.json'),
path.resolve(config.paths.source.fonts + '/*'),
path.resolve(config.paths.source.images + '/*'),
path.resolve(config.paths.source.data + '*.json')
],
tasks: ['default', 'bsReload:pl_css']
}
},
browserSync: {
pl_dev: {
options: {
server: path.resolve(config.paths.public.root),
watchTask: true,
watchOptions: {
ignoreInitial: true,
ignored: '*.html'
},
plugins: [
{
module: 'bs-html-injector',
options: {
files: [path.resolve(config.paths.public.root + '/index.html'), path.resolve(config.paths.public.styleguide + '/styleguide.html')]
}
}
]
}
}
},
bsReload: {
pl_css: path.resolve(config.paths.public.root + '**/*.css')
}
});

grunt.registerTask('pl:serve', ['patternlab', 'copy:pl_main', 'copy:pl_styleguide', 'browserSync', 'watch:pl_all']);

grunt.registerTask('pl:build', ['concat']);
};
Loading