#!/usr/bin/env bash src=$PWD ant_build_script_remote=git://github.com/h5bp/ant-build-script.git h5bp_remote=git://github.com/h5bp/html5-boilerplate.git bootstrap_remote=git://github.com/twitter/bootstrap.git ant_build_script_branch=master h5bp_branch=master bootstrap_branch=2.0-wip # list of bootstrap plugins to be prompted PLUGINS=$(cat bootstrap-plugins.txt) # the less cmd to run to compiles bootstrap's css files LESS_CMDS="#!/usr/bin/env bash mkdir css/bs/ ./node_modules/.bin/lessc css/less/bootstrap.less css/bs/bootstrap.css ./node_modules/.bin/lessc css/less/responsive.less css/bs/bootstrap-responsive.css ./node_modules/.bin/lessc --compress css/less/bootstrap.less css/bs/bootstrap.min.css ./node_modules/.bin/lessc --compress css/less/responsive.less css/bs/bootstrap-responsive.min.css # edit the few lines below to not include responsive's css into final bootstrap css cat css/bs/bootstrap.css css/bs/bootstrap-responsive.css >> css/bootstrap.css cat css/bs/bootstrap.min.css css/bs/bootstrap-responsive.min.css >> css/bootstrap.min.css " # need help ? if no args and help flags if [ "$1" == '-h' ] then cat < $name/css/less/bootstrap.less echo " 5. Create the app.css file " echo " /* ============================================================================= App specific CSS file. This is usually where the site/app's CSS specific rules are setup. Note that you could do exactly the same using less by adding a '@import "app.less";' at the end of css/less/bootstrap.less file. ========================================================================== */ " > $name/css/app.css echo " 6. Go in 'css', rename h5bp's 'style.css' to 'h5bp.css'. " cd $name/css && mv style.css h5bp.css && cd $src echo " 7. Create a new 'css/style.css' file: " echo " /* ============================================================================= CSS App imports. These imports are inlined and minified by the build script. If you don't intend to use a build script, do not use @import statements. Use a single style.css file with bootstrap's style first, then your specific CSS files. Following assumes an app.css to put specific CSS rules. Both unminified and minified version of bootstrap's css will be generated by the less script command. You may want to switch the bootstrap.css to bootstrap.min.css ========================================================================== */ @import url('bootstrap.css'); @import url('app.css'); " > $name/css/style.css echo " 8. Processing of bootstrap's plugins, you'll be prompted for each files in .tmp/bootstrap/js/ directory. Simply put a y/n to tell wheter you want them included and concat'd to the js/plugins.js file. Note that popover plugin requires tooltip to be included fist, so be sure to tell this script to include both tooltip / popover. You'll be prompted for tooltip plugin at first. " cd .tmp/bootstrap/js/ for f in $PLUGINS; do while [ "$yepnope" != "y" -a "$yepnope" != "n" -a "$yepnope" != "yep" -a "$yepnope" != "nope" ] do read -p "$f >> $name/js/plugins.js: (yep) " yepnope || exit [ -z $yepnope ] && yepnope="yep" [ "$yepnope" == "y" -o "$yepnope" == "n" ] || [ "$yepnope" == "yep" -o "$yepnope" == "nope" ] || echo "Incorrect value" done [ "$yepnope" == "y" -o "$yepnope" == "yep" ] && cat $f >> $src/$name/js/plugins.js unset yepnope done cd $src echo " 9. Init npm package for the website " cd $name && npm init || exit 0 echo "You may want to tweak the package.json file, only name/version are mandatory." echo " 10. Add less as package.json's dependency (npm install less --save) " npm install less --save || exit 0 echo " 11. Add an npm script to trigger the less build. " mv package.json package.json.orig cat package.json.orig | sed "$ s/}/ , \"scripts\": { \"less\": \"sh build-bootstrap.sh\" } }/g" > package.json echo "$LESS_CMDS" > build-bootstrap.sh cd $src echo " 12. Leaving out temporary dirs (.tmp/). You may want to remove this dir or let it be so that next builds will pull instead of clones (significantly faster). This is relative to the current working directory though: $src " echo " 13. Running a first compile step to generate $name/css/bootstrap.css " cd $name && npm run-script less || exit 0 echo " All done! Check out the $name directory. Simply run 'npm run-script less' to trigger the less compile step. "