webdev_setup.sh

#!/bin/sh

# First, check for global gulp install
npm list -g | grep gulp &> /dev/null
if [ $? == 1 ]; then
  echo 'Please install gulp globally before running this script: sudo npm i -g gulp'
  exit 1
fi

# Init repo
npm init

# Gulp
npm i -D gulp gulp-rename gulp-server-livereload

# JS
npm i -D browserify babelify babel-register babel-preset-env gulp-sourcemaps

# CSS
npm i -D gulp-sass gulp-autoprefixer

# Vinyl
npm i -D vinyl-source-stream vinyl-buffer

# Folder structure
mkdir src
touch src/index.js

mkdir src/scss
touch src/scss/base.scss

mkdir dist
mkdir dist/css
mkdir dist/js
touch dist/index.html

#
# CREATE BAREBONES SITE
#

# SASS
cat > src/scss/base.scss <<'END'
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  font-family: Verdana, sans-serif;
  color: #333;
}
END

# JS
echo "console.log('Hello world!')" > src/index.js

# HTML
cat > dist/index.html <<'END'
<!DOCTYPE html>
<html>

<head>
  <title>My website</title>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1>Hello world!</h1>
  <script type="text/javascript" src="js/bundle.js"></script>
</body>

</html>
END

#
# .BABELRC
#

cat > .babelrc <<'END'
{
  "presets": [ "env" ]
}
END

#
# CREATE GULPFILE
#

gulpfile='gulpfile.babel.js'
> $gulpfile

function add () {
  echo $1 >> $gulpfile
}

function indent () {
  printf '%0.s ' $(seq 1 $1) >> $gulpfile
}

# Add dependencies to gulpfile
declare -a depnames=(browserify gulp rename sourcemaps sass autoprefixer source buffer server)
declare -a dependencies=(browserify gulp gulp-rename gulp-sourcemaps gulp-sass gulp-autoprefixer vinyl-source-stream vinyl-buffer gulp-server-livereload)

add '// Dependencies'
for i in {0..8}; do
  add "import ${depnames[i]} from '${dependencies[i]}'"
done
add

# Useful paths
declare -a pathnames=(serverPath sassSrc sassWatchPath sassOutputPath jsSrc jsWatchPath jsOutputPath)
declare -a paths=(./dist ./src/scss/base.scss ./src/scss/**/*.scss ./dist/css ./src/index.js ./src/**/*.js ./dist/js)

add '// Paths'
for i in {0..6}; do
  add "const ${pathnames[i]} = '${paths[i]}'"
done
add

# Gulp task building functions
function gulp_task_start () {
  add "gulp.task('$1', () => {"
}
function gulp_task_pipe () {
  arr=("$@")
  for i in "${arr[@]}"; do
    indent 4; add ".pipe($i)"
  done
}
function gulp_task_end () {
  add '})'; add
}

# SASS
gulp_task_start 'sass'
indent 2; add 'return gulp.src(sassSrc)'
gulp_task_pipe 'sourcemaps.init()' "sass().on('error', sass.logError)" "autoprefixer({browsers:['last 2 versions']})" 'sourcemaps.write()' "rename('style.css')" 'gulp.dest(sassOutputPath)'
gulp_task_end

# JS
gulp_task_start 'js'
indent 2; add "return browserify(jsSrc, {debug: true, extensions:['es6']})"
indent 4; add ".transform('babelify', {presets: ['env']})"
indent 4; add ".bundle()"
gulp_task_pipe "source('bundle.js')" 'buffer()' 'sourcemaps.init({loadMaps: true})' 'sourcemaps.write()' 'gulp.dest(jsOutputPath)'
gulp_task_end

# Watch
gulp_task_start 'watch'
indent 2; add "gulp.watch(sassWatchPath, ['sass'])"
indent 2; add "gulp.watch(jsWatchPath, ['js'])"
gulp_task_end

# Server
gulp_task_start 'webserver'
indent 2; add 'gulp.src(serverPath)'
indent 4; add '.pipe(server({'
indent 6; add 'livereload: true,'
indent 6; add 'open: true'
indent 4; add '}))'
gulp_task_end

# Default
add "gulp.task('default', ['sass', 'js', 'watch', 'webserver'])"

# Run gulp
gulp