sh Alfred Workflow用于创建SASS / COMPASS项目

Posted 2021-05-07

#!/bin/bash
#
# =================
# = What is this? =
# =================
# This is an Alfred (https://www.alfredapp.com/) workflow that will create a structured SASS/COMPASS project:
# (your mileage will vary and you will need to adjust the paths and actions)
# {query} = the string/name your entered in your Alfred dialog
#
# example.com (yes, I sort them by domain names)
# |-Backups (web & db backups)
# |-Assets (media/assets for this project)
# |--src (source files like .psd, .svg)
# |--attachments (mail attachments)
# |-Local Sandbox (the web project's root')
# |--example.com (root of the SASS project)
# |---htdocs (live files)
# |----css (SASS output)
# |----js (SASS output)
# |----fonts (webfonts)
# |---javascript (SASS JS source files)
# |---sass (SCSS source files)


# =================================
# = Creating your Alfred Workflow =
# =================================
# 1. (Alfred)Preferences > New Workflow > Templates > Essentials > Keyword to Script
# 2. Name it anything you like, > "Create"
# 3. Enter a Keyword (eg: "newproject"), "with space", "Argument required", any Title > "Save"
# 4. Paste this whole script into the "Script" field
# done


# =========
# = Usage =
# =========
# open an Alfred dialog and enter "newproject example.com" 
# start working


# =========
# = Setup =
# =========
# Your project's (existing) main/top directory. (including a trailing slash/)
# eg: ${HOME}/Development/Projects/Web/
TOPDIR="${HOME}/Desktop/"
#
# Name of the SASS project's (sub)directory. (including a trailing slash/)
# eg: Sandbox (use: "Local\ Sandbox" for directories containing spaces)
SASSDIR="Sandbox/"
#
# Author's name & URI
AUTHOR="Your Name"
AUTHOR_URI="http://example.com"
#
# You have adjusted the above paths? 
# Sure? 
# Ok - now set LIVE to "yes" IF YOU HAVE CHECKED THE PATHS AND THINK YOU KNOW WHAT YOU ARE DOING
LIVE=""


# =========
# = CHECK =
# =========
# Don't do anything unless it's activated by LIVE="yes"
if ! [ "$LIVE" = "yes" ]; then
    RUN="$(osascript -e 'display dialog "You will need to activate the script in the Setup section by setting LIVE=yes" buttons {"OK"} default button "OK"')"
    exit 1
fi


# =================
# = Project stuff =
# =================
# get date for the project struture. eg: /example.com/2015/
YEAR=`date +%Y`
#
# create the main directory, a (eg) "2015" directory and go there
eval mkdir -p ${TOPDIR}{query}/$YEAR
eval cd ${TOPDIR}{query}/$YEAR
#
# create the main sub-directories
# Backups
# Assets
# - src
# - attachments
eval mkdir -p {"${SASSDIR}"{query},Backups,Assets/{src,attachments}}
#
# create the project htdocs directories (SASS' output and other resources)
# htdocs
# - css
# - fonts
# - img
# - js
eval mkdir -p "${SASSDIR}"{query}/htdocs/{css,img,js,fonts}
#
# install SASS/COMPASS
eval cd ${TOPDIR}{query}/$YEAR/${SASSDIR}
compass create {query}
#
# change directories
eval cd ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}
#
# customize COMPASS default output path's 
# change... 
# ...CSS output dir -> htdocs/css
# ...Images dir -> htdocs/img (for whatever reson)
# ...Javascript output dir -> htdocs/js 
perl -p -i -e 's/css_dir = "stylesheets"/css_dir = "htdocs\/css"/g' config.rb
perl -p -i -e 's/images_dir = "images"/images_dir = "htdocs\/img"/g' config.rb
perl -p -i -e 's/javascripts_dir = "javascripts"/javascripts_dir = "htdocs\/js"/g' config.rb
#
# remove the COMPASS default files
rm -rf ./stylesheets
#
# create SASS dirs and files
# JS
mkdir ./javascripts
#
# Create the main Javascript file
touch ./javascripts/scripts.js
#
# CSS/SASS
# create/organize a basic structure for our SASS files
# sections: reusable sections/elements
# views: view/page-specific styles
# assets: styles for 3rd party resources that don't come via bower
eval "mkdir -p ./sass/{sections,views,assets}"
eval "touch ./sass/{sections.scss,views.scss,assets.scss,base.scss,bs_vars.scss}"
echo '@import "compass/css3";' >> ./sass/screen.scss
echo '@import "base";' >> ./sass/screen.scss
#
# uncomment the next two lines if you use bootstrap and copy bootstrap variables to bs_vars.scss
echo '//@import "bs_vars";' >> ./sass/screen.scss
echo '//@import "../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";' >> ./sass/screen.scss
#
# uncomment the next two lines if you use Font-Awesome
echo '//@import "../bower_components/Font-Awesome/scss/font-awesome.scss";' >> ./sass/screen.scss
#
# include sections, views and assets
echo '@import "sections";' >> ./sass/screen.scss
echo '@import "views";' >> ./sass/screen.scss
echo '@import "assets";' >> ./sass/screen.scss



# ===============
# = WP or MODX? =
# ===============
#
CMS="$(osascript -e 'display dialog "Create CMS resources?" buttons {"Cancel", "WordPress", "MODX"} default button "Cancel"')"

if [ "$CMS" = "button returned:WordPress" ]; then
    # ======================
    # = WordPress (again?) =
    # ======================
    THEME="$(osascript -e 'Tell application "System Events" to display dialog "Enter the WordPress theme name " default answer ""' -e 'text returned of result' 2>/dev/null)"
    if [ $? -ne 0 ]; then
        # The user pressed Cancel
        exit 1 # exit with an error status
    elif [ -z "$THEME" ]; then
        # The user left the project name blank
        osascript -e 'Tell application "System Events" to display alert "No theme name entered, cancelling." as warning'
        exit 1 # exit with an error status
    fi
    eval mkdir -p ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}/htdocs/wordpress/wp-content/themes/$THEME
    eval touch ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}/htdocs/wordpress/wp-content/themes/$THEME/style.css
    eval touch ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}/htdocs/wordpress/wp-content/themes/$THEME/functions.php
    #
    eval cd ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}/htdocs/wordpress/wp-content/themes/$THEME/
    #
    # Remove the "Template" line and edit the Description if it's not a child theme
    echo "/*
    Theme Name: ${THEME}
    Description: Childtheme of foobar
    Author: ${AUTHOR}
    Author URI: ${AUTHOR_URI}
    Template: foobar
    Version: 1.0
*/" > ./style.css
    #
    # open in Finder
    eval open ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}
    exit 0


elif [ "$CMS" = "button returned:MODX" ]; then
    # ===============
    # = MODX (yay!) =
    # ===============
    #
    # create MODX template structure (assets/tpl/)
    eval mkdir -p ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}/htdocs/modx/assets/tpl/
    #
    # create a default home template...
    eval touch ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}/htdocs/modx/assets/tpl/home.tpl
    eval cd ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}/htdocs/modx/assets/tpl/
    #
    # ... and fill it with a basic HTML structure
    echo '<!DOCTYPE HTML>
<html lang="[[++cultureKey]]">
<head>
    <title>[[++site_name]] | [[*longtitle:default=`[[*pagetitle]]`]]</title>
    <meta charset="utf-8" />
    <meta name="description" content="[[+content:limit=`60`]]..." />
    <meta property="og:image" content="[[++site_url]]apple-touch-icon-152x152.png" />
    <meta name="author" content="'${AUTHOR} - ${AUTHOR_URI}'" />
    <link rel="shortcut icon" href="[[++site_url]]favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="[[++site_url]]apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="57x57" href="[[++site_url]]apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="[[++site_url]]apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="[[++site_url]]apple-touch-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="[[++site_url]]apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="[[++site_url]]apple-touch-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="[[++site_url]]apple-touch-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="[[++site_url]]apple-touch-icon-152x152.png" />
    <!--// stylesheets //-->
    <link href="[[++site_url]]css/screen.css" rel="stylesheet" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" media="screen, projection" href="[[++site_url]]css/ie.css" />
    <![endif]-->
    <!--// javascript //-->
    <script src="[[++site_url]]js/scripts.min.js"></script>
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <base href="[[++site_url]]" />
</head>
<body>
	<div class="container">
        <div class="row">
            <div class="col-md-12">
                [[*content]]
            </div>
        </div><!--/.row-->
    </div><!--/.container-->
</body>
</html>' > ./home.tpl
    # open in Finder 
    eval open ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}
    exit 0

else
    # open in Finder
    eval open ${TOPDIR}{query}/$YEAR/${SASSDIR}{query}
    exit 0
fi


# open CodeKit (or whatever GUI compiler you use) to finalize
# http://incident57.com/codekit/
# open -a CodeKit