Untitled

#!/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=master

# 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 <<EOF

  Usage:

    h5bp-twitter-bootstrap [-h] [dirname]

EOF
  exit
fi


echo "

  Cool, let's start.

"

if [ $# -eq 1 ]
then
  # get a name for new project from command line arguments
  name="$1"
fi

# get a name for new project from input
while [ -z $name ]
do
  echo "To create a new project, enter a new directory name"
  read name || exit
done

[ -d $name ] && echo "Directory $name already exists" && exit 1

echo "
  1a. Get html5boilerplate project (git clone into ./tmp/h5bp)
"

if ! [ -d .tmp/h5bp ]
then git clone $h5bp_remote .tmp/h5bp || exit 1
fi

cd .tmp/h5bp
[ $(git branch | grep "*" | sed s/*//) != $h5bp_branch ] &&
  # not the current branch, attempt to create new branch
  git checkout -b $h5bp_branch origin/$h5bp_branch ||
  # if already created, then attempt to checkout
  git checkout $h5bp_branch

git pull && cd $src

echo "
  1b. Get h5bp/ant-build-script project (git clone into ./tmp/ant-build-script)
"

if ! [ -d .tmp/ant-build-script ]
then git clone $ant_build_script_remote .tmp/ant-build-script || exit 1
fi

cd .tmp/ant-build-script
[ $(git branch | grep "*" | sed s/*//) != $ant_build_script_branch ] &&
  # not the current branch, attempt to create new branch
  git checkout -b $ant_build_script_branch origin/$ant_build_script_branch ||
  # if already created, then attempt to checkout
  git checkout $ant_build_script_branch

git pull && cd $src

echo "
  2. Get twitter bootstrap project (git clone into ./tmp/bootstrap).
"
if ! [ -d .tmp/bootstrap ]
then git clone $bootstrap_remote .tmp/bootstrap || exit 1
fi

cd .tmp/bootstrap
[ $(git branch | grep "*" | sed s/*//) != $bootstrap_branch ] &&
  # not the current branch, attempt to create new branch
  git checkout -b $bootstrap_branch origin/$bootstrap_branch ||
  # if already created, then attempt to checkout
  git checkout $bootstrap_branch

git pull && cd $src


echo "
  3. Create html5boilerplate directory/file structure by running build/createproject.sh
"
cd .tmp/h5bp && ../ant-build-script/createproject.sh project && cd $src
mkdir -p $name
echo "Created directory: $name"
cd .tmp/h5bp && cp -r -- css js img *.html *.xml *.txt *.png *.ico .htaccess "../../$name"
echo "Created h5bp project's structure: $name"
cd $src

echo "
  4. Copy bootstrap's 'less' folder to 'css/less/' (or any other path you'd like, following assumes 'css/less/')
"
cp -vr .tmp/bootstrap/less $name/css/less
echo "Create bootstrap's less directory in css/less"

# Commenting out the reset bootstrap drop. By default, the whole bootstrap's css files is used and h5bp's one
# is renamed into h5bp.css. The style.css file importing the css assets does not use h5bp.css.

# echo "\n5. Go in 'css/less', edit the bootstrap.less file and remove the '@import \"reset.less\";' line."
# cp $name/css/less/bootstrap.less $name/css/less/bootstrap.less.orig
# sed '/reset/d' $name/css/less/bootstrap.less.orig | sed '/Reset/d' > $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.

"