Skip to content

Commit 3576870

Browse files
bmuenzenmeyerbmuenzenmeyer
committed
both gulp and grunt configs - with no sass on by default
1 parent c77d61e commit 3576870

File tree

8 files changed

+265
-37
lines changed

8 files changed

+265
-37
lines changed

‎Gruntfile.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,10 @@ module.exports = function(grunt) {
7777
],
7878
tasks: ['default']
7979
},
80-
scss: {
81-
files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
82-
tasks: ['sass', 'copy:css','bsReload:css']
83-
},
80+
// scss: {
81+
// files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
82+
// tasks: ['sass', 'copy:css','bsReload:css']
83+
// },
8484
patterns: {
8585
files: [
8686
'source/_patterns/**/*.mustache',
@@ -90,20 +90,20 @@ module.exports = function(grunt) {
9090
tasks: ['default']
9191
}
9292
},
93-
sass: {
94-
build: {
95-
options: {
96-
style: 'expanded',
97-
precision: 8
98-
},
99-
files: {
100-
'./source/css/style.css': './source/css/style.scss',
101-
'./public/styleguide/css/static.css': './public/styleguide/css/static.scss',
102-
'./public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss',
103-
'./public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss'
104-
}
105-
}
106-
},
93+
// sass: {
94+
// build: {
95+
// options: {
96+
// style: 'expanded',
97+
// precision: 8
98+
// },
99+
// files: {
100+
// './source/css/style.css': './source/css/style.scss',
101+
// './public/styleguide/css/static.css': './public/styleguide/css/static.scss',
102+
// './public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss',
103+
// './public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss'
104+
// }
105+
// }
106+
// },
107107
nodeunit: {
108108
all: ['test/*_tests.js']
109109
},

‎builder/pattern_assembler.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,10 +164,7 @@
164164
throw 'Could not find pattern with key ' + key;
165165
}
166166

167-
/*
168-
* Recursively merge properties of two objects
169-
* http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically
170-
*/
167+
171168
var self = this;
172169
function mergeData(obj1, obj2) {
173170
for (var p in obj2) {

‎builder/patternlab.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
/*
2-
* patternlab-node - v0.12.0 - 2015
3-
*
1+
/*
2+
* patternlab-node - v0.12.0 - 2015
3+
*
44
* Brian Muenzenmeyer, and the web community.
5-
* Licensed under the MIT license.
6-
*
7-
* Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
5+
* Licensed under the MIT license.
6+
*
7+
* Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
88
*
99
*/
1010

@@ -54,7 +54,7 @@ var patternlab_engine = function () {
5454
}
5555
}
5656

57-
function buildPatterns(callback){
57+
function buildPatterns(deletePatternDir){
5858
patternlab.data = fs.readJSONSync('./source/_data/data.json');
5959
patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json');
6060
patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8');
@@ -91,7 +91,9 @@ var patternlab_engine = function () {
9191
});
9292

9393
//delete the contents of config.patterns.public before writing
94-
fs.emptyDirSync(patternlab.config.patterns.public);
94+
if(deletePatternDir){
95+
fs.emptyDirSync(patternlab.config.patterns.public);
96+
}
9597

9698
//render all patterns last, so lineageR works
9799
patternlab.patterns.forEach(function(pattern, index, patterns){
@@ -346,16 +348,16 @@ var patternlab_engine = function () {
346348
version: function(){
347349
return getVersion();
348350
},
349-
build: function(){
350-
buildPatterns();
351+
build: function(deletePatternDir){
352+
buildPatterns(deletePatternDir);
351353
buildFrontEnd();
352354
printDebug();
353355
},
354356
help: function(){
355357
help();
356358
},
357-
build_patterns_only: function(){
358-
buildPatterns();
359+
build_patterns_only: function(deletePatternDir){
360+
buildPatterns(deletePatternDir);
359361
printDebug();
360362
}
361363
};

‎builder/patternlab_grunt.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ module.exports = function(grunt) {
1616
var patternlab = patternlab_engine();
1717

1818
if(arguments.length === 0){
19-
patternlab.build();
19+
patternlab.build(true);
2020
}
2121

2222
if(arg && arg === 'v'){
2323
patternlab.version();
2424
}
2525

2626
if(arg && arg === "only_patterns"){
27-
patternlab.build_patterns_only();
27+
patternlab.build_patterns_only(true);
2828
}
2929

3030
if(arg && arg === "help"){

‎builder/patternlab_gulp.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
var patternlab_engine = require('./patternlab.js');
2+
3+
module.exports = function(gulp) {
4+
5+
gulp.task('patternlab', ['clean'], function(cb){
6+
var patternlab = patternlab_engine();
7+
patternlab.build(false);
8+
cb();
9+
});
10+
11+
gulp.task('patternlab:version', function(){
12+
var patternlab = patternlab_engine();
13+
patternlab.version();
14+
})
15+
16+
gulp.task('patternlab:only_patterns', ['clean'], function(){
17+
var patternlab = patternlab_engine();
18+
patternlab.build_patterns_only(false);
19+
})
20+
21+
gulp.task('patternlab:help', function(){
22+
var patternlab = patternlab_engine();
23+
patternlab.help();
24+
})
25+
26+
}

‎gulpfile.js

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
// Shoutout to oscar-g for starting this at https://github.com/oscar-g/patternlab-node/tree/dev-gulp
2+
3+
var pkg = require('./package.json'),
4+
gulp = require('gulp'),
5+
eol = require('os').EOL,
6+
del = require('del'),
7+
strip_banner = require('gulp-strip-banner'),
8+
header = require('gulp-header'),
9+
nodeunit = require('gulp-nodeunit'),
10+
sass = require('gulp-sass'),
11+
browserSync = require('browser-sync').create();
12+
13+
require('gulp-load')(gulp);
14+
var banner = [ '/** ',
15+
' * <%= pkg.name %> - v<%= pkg.version %> - <%= today %>',
16+
' * ',
17+
' * <%= pkg.author %>, and the web community.',
18+
' * Licensed under the <%= pkg.license %> license.',
19+
' * ',
20+
' * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.',
21+
' * ', ' **/'].join(eol);
22+
23+
//load patternlab-node tasks
24+
gulp.loadTasks(__dirname+'/builder/patternlab_gulp.js');
25+
26+
//clean patterns dir
27+
gulp.task('clean', function(cb){
28+
del.sync(['./public/patterns/*'], {force: true});
29+
cb();
30+
})
31+
32+
//build the banner
33+
gulp.task('banner', function(){
34+
return gulp.src([
35+
'./builder/patternlab.js',
36+
'./builder/object_factory.js',
37+
'./builder/lineage_hunter.js',
38+
'./builder/media_hunter.js',
39+
'./builder/patternlab_grunt.js',
40+
'./builder/parameter_hunter.js',
41+
'./builder/pattern_exporter.js',
42+
'./builder/pattern_assembler.js',
43+
'./builder/pseudopattern_hunter.js',
44+
'./builder/list_item_hunter.js'
45+
])
46+
.pipe(strip_banner())
47+
.pipe(header( banner, {
48+
pkg : pkg,
49+
today : new Date().getFullYear() }
50+
))
51+
.pipe(gulp.dest('./builder'));
52+
})
53+
54+
//copy tasks
55+
gulp.task('cp:js', function(){
56+
return gulp.src('**/*.js', {cwd:'./source/js'})
57+
.pipe(gulp.dest('./public/js'))
58+
});
59+
gulp.task('cp:img', function(){
60+
return gulp.src(
61+
[ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg' ],
62+
{cwd:'./source/images'} )
63+
.pipe(gulp.dest('./public/images'))
64+
});
65+
gulp.task('cp:font', function(){
66+
return gulp.src('*', {cwd:'./source/fonts'})
67+
.pipe(gulp.dest('./public/fonts'))
68+
});
69+
gulp.task('cp:data', function(){
70+
return gulp.src('annotations.js', {cwd:'./source/_data'})
71+
.pipe(gulp.dest('./public/data'))
72+
})
73+
gulp.task('cp:css', function(){
74+
return gulp.src('./source/css/style.css')
75+
.pipe(gulp.dest('./public/css'))
76+
.pipe(browserSync.stream());
77+
})
78+
79+
//server and watch tasks
80+
gulp.task('connect', ['lab'], function(){
81+
browserSync.init({
82+
server: {
83+
baseDir: './public/'
84+
}
85+
});
86+
gulp.watch('./source/css/style.css', ['cp:css']);
87+
88+
//suggested watches if you use scss
89+
// gulp.watch('./source/css/**/*.scss', ['sass:style']);
90+
// gulp.watch('./public/styleguide/*.scss', ['sass:styleguide']);
91+
92+
gulp.watch([
93+
'./source/_patterns/**/*.mustache',
94+
'./source/_patterns/**/*.json',
95+
'./source/_data/*.json' ],
96+
['lab-pipe'], function(){
97+
browserSync.reload();
98+
});
99+
100+
})
101+
102+
//unit test
103+
gulp.task('nodeunit', function(){
104+
return gulp.src('./test/**/*_tests.js')
105+
.pipe(nodeunit());
106+
})
107+
108+
//sass tasks, turn on if you want to use
109+
// gulp.task('sass:style', function(){
110+
// return gulp.src('./source/css/*.scss')
111+
// .pipe(sass({
112+
// outputStyle: 'expanded',
113+
// precision: 8
114+
// }))
115+
// .pipe(gulp.dest('./public/css'))
116+
// .pipe(browserSync.stream());
117+
// })
118+
// gulp.task('sass:styleguide', function(){
119+
// return gulp.src('./public/styleguide/css/*.scss')
120+
// .pipe(sass({
121+
// outputStyle: 'expanded',
122+
// precision: 8
123+
// }))
124+
// .pipe(gulp.dest('./public/styleguide/css'))
125+
// .pipe(browserSync.stream());
126+
// })
127+
128+
gulp.task('lab-pipe', ['lab'], function(cb){
129+
cb();
130+
browserSync.reload();
131+
})
132+
133+
gulp.task('default', ['lab']);
134+
135+
gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', /*'sass:style', 'sass:styleguide'*/]);
136+
gulp.task('prelab', ['clean', 'banner', 'assets']);
137+
gulp.task('lab', ['prelab', 'patternlab'], function(cb){cb();});
138+
gulp.task('patterns', ['patternlab:only_patterns']);
139+
gulp.task('serve', ['lab', 'connect']);
140+
gulp.task('travis', ['lab', 'nodeunit']);
141+
142+
gulp.task('version', ['patternlab:version']);
143+
gulp.task('help', ['patternlab:help']);

‎package.gulp.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "patternlab-node",
3+
"description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).",
4+
"version": "0.12.0",
5+
"devDependencies": {
6+
"browser-sync": "^2.8.2",
7+
"del": "^1.2.1",
8+
"diveSync": "^0.2.1",
9+
"fs-extra": "^0.14.0",
10+
"glob": "^4.3.5",
11+
"gulp": "^3.8.8",
12+
"gulp-connect": "^2.0.6",
13+
"gulp-copy": "0.0.2",
14+
"gulp-header": "^1.0.5",
15+
"gulp-load": "^0.1.1",
16+
"gulp-nodeunit": "0.0.5",
17+
"gulp-sass": "^0.7.3",
18+
"gulp-strip-banner": "0.0.2",
19+
"html-entities": "^1.1.1",
20+
"mustache": "^1.0.0"
21+
},
22+
"keywords": [
23+
"Pattern Lab",
24+
"Atomic Web Design",
25+
"Node",
26+
"Grunt",
27+
"Javascript"
28+
],
29+
"repository": {
30+
"type": "git",
31+
"url": "git://github.com/pattern-lab/patternlab-node.git"
32+
},
33+
"author": "Brian Muenzenmeyer",
34+
"license": "MIT",
35+
"scripts": {
36+
"test": "grunt travis --verbose"
37+
},
38+
"engines": {
39+
"node": ">=0.1"
40+
}
41+
}

‎source/css/style.scss

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
/*
2-
2+
,, ,, ,,
3+
.M"""bgd mm db `7MM mm mm `7MM OO OO OO
4+
,MI "Y MM MM MM MM MM 88 88 88
5+
`MMb. mmMMmm ,pW"Wq.`7MMpdMAo. `7Mb,od8 `7MM .P"Ybmmm MMpMMMb.mmMMmm mmMMmm MMpMMMb. .gP"Ya `7Mb,od8 .gP"Ya || || ||
6+
`YMMNq. MM 6W' `Wb MM `Wb MM' "' MM :MI I8 MM MM MM MM MM MM ,M' Yb MM' "',M' Yb || || ||
7+
. `MM MM 8M M8 MM M8 MM MM WmmmP" MM MM MM MM MM MM 8M"""""" MM 8M"""""" `' `' `'
8+
Mb dM MM YA. ,A9 MM ,AP MM MM 8M MM MM MM MM MM MM YM. , MM YM. , ,, ,, ,,
9+
P"Ybmmd" `Mbmo`Ybmd9' MMbmmd' .JMML. .JMML.YMMMMMb .JMML JMML.`Mbmo `Mbmo.JMML JMML.`Mbmmd'.JMML. `Mbmmd' db db db
10+
MM 6' dP
11+
.JMML. Ybmmmd'
12+
Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray!
13+
You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet.
14+
So please don't use these styles. They're just here to put together the demo, and nothing more.
15+
They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself.
16+
Atomic design is philosophically complimentary with these CSS approaches:
17+
* SMACSS by Jonathan Snook http://smacss.com/
18+
* OOCSS by Nicole Sullivan http://oocss.org/
19+
* BEM CSS Methology : http://bem.info/method/
20+
* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines
21+
So feel free to use any of these approaches. Or don't. It's totally up to you.
322
*/
423

524

0 commit comments

Comments
 (0)