Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,5 @@ public/styleguide/css/static.css.map
public/styleguide/css/styleguide-specific.css.map
public/styleguide/css/styleguide.css.map
source/css/style.css.map
.idea/
public/styleguide/
4 changes: 4 additions & 0 deletions CHANGELOG
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@ PL-node-v1.1.0
- THX: Thanks @robinsonaaron for the issue and pull request!
- FIX: Prefer exact pattern key match over fuzzy matches inside getpatternbykey()
- THX: Thanks @EvanLovely for the suggestion
- ADD: Make all paths configurable
- THX: HUGE Thanks to @geoffp and @EvanLovely for their thoughts, time, and talent to make this a reality!
- FIX: Fix issue where absolute paths in the config path object would not resolve
- THX: Thanks to @geoffp and @EvanLovely for reporting, fixing and testing the issue in the dev branch.
- FIX: Typo in gulp instructions in README.
- THX: Thanks @simonknittel for the watchful eyes
- CHG: Changed locations of ./public/styleguide to ./core/styleguide to make ./public/ a cleaner distribution directory
- CHG: Removed scss files and config from project. This is in preparation for including the default asset repo in the future

PL-node-v1.0.0
- FIX: Resolve issue with not hiding underscored patterns.
Expand Down
76 changes: 28 additions & 48 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
module.exports = function(grunt) {

var path = require('path');

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
Expand Down Expand Up @@ -60,97 +62,75 @@ module.exports = function(grunt) {
copy: {
main: {
files: [
{ expand: true, cwd: './source/js/', src: '*', dest: './public/js/'},
{ expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' },
{ expand: true, cwd: './source/images/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/' },
{ expand: true, cwd: './source/images/sample/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/sample/'},
{ expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'},
{ expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' }
{ expand: true, cwd: paths().source.js, src: '*.js', dest: paths().public.js},
{ expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css },
{ expand: true, cwd: paths().source.images, src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: paths().public.images },
{ expand: true, cwd: paths().source.fonts, src: '*', dest: paths().public.fonts},
{ expand: true, cwd: paths().source.data, src: 'annotations.js', dest: paths().public.data}
]
},
css: {
styleguide: {
files: [
{ expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' }
{ expand: true, cwd: paths().source.styleguide, src: ['*.*', '**/*.*'], dest: paths().public.styleguide }
]
}
},
watch: {
all: {
files: [
'source/css/**/*.css',
'public/styleguide/css/*.css',
'source/_patterns/**/*.mustache',
'source/_patterns/**/*.json',
'source/_data/*.json'
paths().source.css + '**/*.css',
paths().source.styleguide + 'css/*.css',
paths().source.patterns + '**/*.mustache',
paths().source.patterns + '**/*.json',
paths().source.data + '*.json'
],
tasks: ['default']
},
// scss: {
// files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
// tasks: ['sass', 'copy:css','bsReload:css']
// },
patterns: {
files: [
'source/_patterns/**/*.mustache',
'source/_patterns/**/*.json',
'source/_data/*.json'
],
tasks: ['default']
tasks: ['default', 'bsReload:css']
}
},
// sass: {
// build: {
// options: {
// style: 'expanded',
// precision: 8
// },
// files: {
// './source/css/style.css': './source/css/style.scss',
// './public/styleguide/css/static.css': './public/styleguide/css/static.scss',
// './public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss',
// './public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss'
// }
// }
// },
nodeunit: {
all: ['test/*_tests.js']
},
browserSync: {
dev: {
options: {
server: './public',
server: paths().public.root,
watchTask: true,
watchOptions: {
ignoreInitial: true,
ignored: '*.html'
},
plugins: [
{
module: 'bs-html-injector',
options: {
files: './public/index.html'
files: [paths().public.root + '/index.html', paths().public.styleguide + '/styleguide.html']
}
}
]
}
}
},
bsReload: {
css: './public/**/*.css'
css: paths().public.root + '**/*.css'
}
});

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/');

//if you choose to use scss, or any preprocessor, you can add it here
grunt.registerTask('default', ['patternlab', /*'sass',*/ 'copy:main']);
grunt.registerTask('default', ['patternlab', 'copy:main', 'copy:styleguide']);

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

//TODO: this line is more efficient, but you cannot run concurrent watch tasks without another dependency.
//grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:patterns', 'watch:scss']);
grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:all']);
grunt.registerTask('serve', ['patternlab', 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']);

grunt.registerTask('build', ['nodeunit', 'concat']);

Expand Down
32 changes: 29 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,36 @@ Get more information about patternlab-node, pattern lab in general, and where to
##### 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.

##### Preprocessor Support
The patternlab-node release package ships with some `.scss` files utilized in the creation of the style guide and sample templates, but these are not required. The compilation tasks are commented out in the `Gruntfiles|Gulpfiles` but can be uncommented or changed to meet your needs. Sass modules are not included in `package.json` files - the prevailing thought being if you are familiar enough with preprocessors, you can use the instructions for [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) / [gulp-sass](https://github.com/dlmanning/gulp-sass) / _preprocessor of choice_ to install them. Uncomment the preprocessor configuration to fully utilize the example templates, css and style guide.
##### 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:

**NOTE:** You may run into issues installing gulp-sass if you don't have the latest Visual Studio on Windows. See [here](https://github.com/sass/node-sass/issues/469) for more information and [this query](https://github.com/sass/node-sass/issues?utf8=%E2%9C%93&q=is%3Aissue+install) for a slew of installation problems related to gulp-sass.
```
"paths" : {
"source" : {
"root": "./source/",
"patterns" : "./source/_patterns/",
"data" : "./source/_data/",
"styleguide" : "./core/styleguide/",
"patternlabFiles" : "./source/_patternlab-files/",
"js" : "./source/js",
"images" : "./source/images",
"fonts" : "./source/fonts",
"css" : "./source/css/"
},
"public" : {
"root" : "./public/",
"patterns" : "./public/patterns/",
"data" : "./public/data/",
"styleguide" : "./public/styleguide/",
"js" : "./public/js",
"images" : "./public/images",
"fonts" : "./public/fonts",
"css" : "./public/css"
}
}
```

Note the intentional repitition of the nested structure, made this way for maximum flexibility. Relative paths are default but absolute paths should work too. You may also use these paths within Grunt or Gulp files by referring to the paths() object.

##### Nav Bar Controls
If you don't have a need for some of the nav-bar tools in the Pattern Lab frontend, you can turn them off in `config.json`.
Expand Down
1 change: 1 addition & 0 deletions config.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"root": "./source/",
"patterns" : "./source/_patterns/",
"data" : "./source/_data/",
"styleguide" : "./core/styleguide/",
"patternlabFiles" : "./source/_patternlab-files/",
"js" : "./source/js",
"images" : "./source/images",
Expand Down
Loading