Skip to content

Added BrowserSync #86

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

Merged
merged 3 commits into from
Jan 22, 2015
Merged

Added BrowserSync #86

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
81467dd
Added Browsersync
ivanmayes Jan 12, 2015
8bed7bc
removed dynamic ip reference
ivanmayes Jan 12, 2015
5bb91da
Added ip replacement, changed server url to be public
ivanmayes Jan 12, 2015
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
311 changes: 192 additions & 119 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,201 @@
module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
options: { force: true },
files: ['./public/patterns']
},
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'
},
pattern_exporter: {
src: './builder/pattern_exporter.js',
dest: './builder/pattern_exporter.js'
}
},
copy: {
main: {
files: [
{ expand: true, cwd: './source/js/', src: '*', dest: './public/js/'},
{ expand: true, cwd: './source/css/', src: 'style.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/' }
]
}
},
jshint: {
options: {
"curly": true,
"eqnull": true,
"eqeqeq": true,
"undef": true,
"forin": true,
//"unused": true,
"node": true
},
patternlab: ['Gruntfile.js', './builder/lib/patternlab.js']
},
watch: {
// scss: { //scss can be watched if you like
// options: {
// livereload: true
// },
// files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
// tasks: ['default']
// },
all: {
options: {
livereload: true
},
files: [
'source/_patterns/**/*.mustache',
'source/_patterns/**/*.json',
'source/_data/*.json'
],
tasks: ['default']
}
},
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']
},
connect: {
app:{
options: {
port: 9001,
base: './public',
hostname: 'localhost',
open: true,
livereload: 35729
}
}
}
});
var os = require('os');
var ifaces = os.networkInterfaces();
var lookupIpAddress = null;
for (var dev in ifaces) {
if (dev !== "en1" && dev !== "en0") {
continue;
}
ifaces[dev].forEach(function(details) {
if (details.family === 'IPv4') {
lookupIpAddress = details.address;
}
});
}

// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
//If an IP Address is passed
//we're going to use the ip/host from the param
//passed over the command line
//over the ip addressed that was looked up
var ipAddress = grunt.option('host') || lookupIpAddress;

//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', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy']);
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
options: {
force: true
},
files: ['./public/patterns']
},
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'
},
pattern_exporter: {
src: './builder/pattern_exporter.js',
dest: './builder/pattern_exporter.js'
}
},
copy: {
main: {
files: [
{
expand: true,
cwd: './source/js/',
src: '*',
dest: './public/js/'
},
{
expand: true,
cwd: './source/css/',
src: 'style.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/'
}
]
}
},
jshint: {
options: {
"curly": true,
"eqnull": true,
"eqeqeq": true,
"undef": true,
"forin": true,
//"unused": true,
"node": true
},
patternlab: ['Gruntfile.js', './builder/lib/patternlab.js']
},
watch: {
// scss: { //scss can be watched if you like
// options: {
// livereload: true
// },
// files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
// tasks: ['default']
// },
all: {
options: {
livereload: true
},
files: [
'source/_patterns/**/*.mustache',
'source/_patterns/**/*.json',
'source/_data/*.json'
],
tasks: ['default']
}
},
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'
}
}
},
browserSync: {
bsFiles: {
src: 'public/css/style.css'
},
options: {
host: ipAddress,
watchTask: true
}
},
replace: {
ip: {
src: ['public/**/*.html'], // source files array (supports minimatch)
overwrite: true, // destination directory or file
replacements: [{
from: 'HOST', // string replacement
to: ipAddress
}]
}
},
nodeunit: {
all: ['test/*_tests.js']
},
connect: {
app: {
options: {
port: 9001,
//hostname: localhost, // Private IP option
hostname: ipAddress,
base: './public',
open: true,
livereload: 35729
}
}
}
});

//travis CI task
grunt.registerTask('travis', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'nodeunit']);
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']);
//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', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy']);

//travis CI task
grunt.registerTask('travis', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'nodeunit']);

grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'replace', 'connect', 'browserSync', 'watch']);

};
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"version": "0.1.7",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-browser-sync": "^1.5.3",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-copy": "^0.7.0",
Expand All @@ -12,6 +13,7 @@
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-nodeunit": "^0.4.1",
"grunt-contrib-connect": "^0.9.0",
"grunt-text-replace": "^0.3.11",
"mustache": "^1.0.0",
"matchdep": "^0.3.0",
"fs-extra": "^0.14.0",
Expand Down
5 changes: 5 additions & 0 deletions source/_patternlab-files/pattern-header-footer/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@
<script src="../../styleguide/js/annotations-pattern.js"></script>
<script src="../../styleguide/js/code-pattern.js"></script>
<!-- /DO NOT MODIFY -->

<!-- Browser Sync -->
<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='//HOST:3000/browser-sync/browser-sync-client.1.9.0.js'><\/script>".replace(/PORT/g, location.port));
//]]></script>

</body>
</html>
5 changes: 5 additions & 0 deletions source/_patternlab-files/styleguide.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@
<script src="../../data/annotations.js"></script>
<script src="../../styleguide/js/annotations-pattern.js"></script>
<script src="../../styleguide/js/code-pattern.js"></script>

<!-- Browser Sync -->
<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='//HOST:3000/browser-sync/browser-sync-client.1.9.0.js'><\/script>".replace(/PORT/g, location.port));
//]]></script>

</body>
</html>