Code – Mike Mamaril – Freelance Web Developer

Deploying a WordPress plugin repo on github to WordPress on WIndows

I never learned how to use Subversion which is why publishing my work on WordPress becomes such a chore. Thankfully, I found a script that can deploy a local Git repository to WordPress.org. This script assumes you have the following setup and working in your Windows environment already:

SVN, in this case I use TortoiseSVN
GIT, I use the GIT-SCM and Github Windows client
Already have a WordPress.org account and existing repository for your project

The script is originally from GaryJones from github which I modified to suit my needs. Simply put the script in the repository folder and change out the CHANGE_ME values before running the script.

You have the option to set the path of the local repository within the script or in the prompt, what I prefer to do is to just drop the script in the working directory and run the script there.

VAR_CURRENTDIR=$(pwd)
VAR_PLUGINSLUG="CHANGE_ME"
VAR_SVN_USERNAME="CHANGE_ME"

default_svnpath="$VAR_CURRENTDIR/tmp"
default_svnurl="https://plugins.svn.wordpress.org/$VAR_PLUGINSLUG"
default_plugindir="$VAR_CURRENTDIR"
default_mainfile="$VAR_PLUGINSLUG.php"

echo
echo "WordPress Plugin SVN Deploy v3.1.0"
echo
echo "Let's collect some information first. There are six questions."
echo
echo "Default values are in brackets - just hit enter to accept them."
echo

# Get some user input
# Can't use the -i flag for read, since that doesn't work for bash 3
printf "Q1. WordPress Repo Plugin Slug e.g. my-awesome-plugin: "
printf "($VAR_PLUGINSLUG): "
read -e input
input="${input%/}" # Strip trailing slash
echo

echo "Q2. Your local plugin root directory (the Git repo)."
printf "($default_plugindir): "
read -e  input
input="${input%/}" # Strip trailing slash
PLUGINDIR="${input:-$default_plugindir}" # Populate with default if empty
echo

# Check directory exists.
if [ ! -d "$PLUGINDIR" ]; then
  echo "Directory $PLUGINDIR not found. Aborting."
  exit 1;
fi

printf "Q3. Name of the main plugin file ($default_mainfile): "
read -e input
MAINFILE="${input:-$default_mainfile}" # Populate with default if empty
echo

# Check main plugin file exists.
if [ ! -f "$PLUGINDIR/$MAINFILE" ]; then
  echo "Plugin file $PLUGINDIR/$MAINFILE not found. Aborting."
  exit 1;
fi

echo "Checking version in main plugin file matches version in readme.txt file..."
echo

# Check version in readme.txt is the same as plugin file after translating both to Unix line breaks to work around grep's failure to identify Mac line breaks
PLUGINVERSION=$(grep -i "Version:" $PLUGINDIR/$MAINFILE | awk -F' ' '{print $NF}' | tr -d '\r')
echo "$MAINFILE version: $PLUGINVERSION"
READMEVERSION=$(grep -i "Stable tag:" $PLUGINDIR/readme.txt | awk -F' ' '{print $NF}' | tr -d '\r')
echo "readme.txt version: $READMEVERSION"

if [ "$READMEVERSION" = "trunk" ]; then
	echo "Version in readme.txt & $MAINFILE don't match, but Stable tag is trunk. Let's continue..."
elif [ "$PLUGINVERSION" != "$READMEVERSION" ]; then
	echo "Version in readme.txt & $MAINFILE don't match. Exiting...."
	exit 1;
elif [ "$PLUGINVERSION" = "$READMEVERSION" ]; then
	echo "Versions match in readme.txt and $MAINFILE. Let's continue..."
fi

echo

echo "Q4. Path to a local directory where a temporary SVN checkout can be made."
printf "Don't add trunk ($default_svnpath): "
read -e input
input="${input%/}" # Strip trailing slash
SVNPATH="${input:-$default_svnpath}" # Populate with default if empty
echo

echo "Q5. Remote SVN repo on WordPress.org."
printf "($default_svnurl): "
read -e input
input="${input%/}" # Strip trailing slash
SVNURL="${input:-$default_svnurl}" # Populate with default if empty
echo

printf "Q6. Your WordPress repo SVN username ($VAR_SVN_USERNAME): "
read -e input
SVNUSER="${input:-$VAR_SVN_USERNAME}" # Populate with default if empty
echo

echo "That's all of the data collected."
echo
echo "Slug: $VAR_PLUGINSLUG"
echo "Plugin directory: $PLUGINDIR"
echo "Main file: $MAINFILE"
echo "Temp checkout path: $SVNPATH"
echo "Remote SVN repo: $SVNURL"
echo "SVN username: $SVNUSER"
echo

printf "OK to proceed (Y|n)? "
read -e input
PROCEED="${input:-y}"
echo

# Allow user cancellation
if [ $(echo "$PROCEED" |tr [:upper:] [:lower:]) != "y" ]; then echo "Aborting..."; exit 1; fi

# Let's begin...
echo ".........................................."
echo
echo "Preparing to deploy WordPress plugin"
echo
echo ".........................................."
echo

echo

echo "Changing to $PLUGINDIR"
cd $PLUGINDIR

# Check for git tag (may need to allow for leading "v"?)
# if git show-ref --tags --quiet --verify -- "refs/tags/$PLUGINVERSION"
if git show-ref --tags --quiet --verify -- "refs/tags/$PLUGINVERSION"
	then
		echo "Git tag $PLUGINVERSION does exist. Let's continue..."
	else
		echo "$PLUGINVERSION does not exist as a git tag. Aborting.";
		exit 1;
fi

echo

echo "Creating local copy of SVN repo trunk..."
svn checkout $SVNURL $SVNPATH --depth immediates
svn update --quiet $SVNPATH/trunk --set-depth infinity

echo "Ignoring GitHub specific files"
# Use local .svnignore if present
if [ -f ".svnignore" ]; then
	echo "Using local .svnignore"
	SVNIGNORE=$( <.svnignore )
else
	echo "Using default .svnignore"
	SVNIGNORE="README.md
Thumbs.db
.github
.git
.gitattributes
.gitignore
composer.lock"
fi

svn propset svn:ignore \""$SVNIGNORE"\" "$SVNPATH/trunk/"

echo "Exporting the HEAD of master from git to the trunk of SVN"
git checkout-index -a -f --prefix=$SVNPATH/trunk/

# If submodule exist, recursively check out their indexes
if [ -f ".gitmodules" ]
	then
		echo "Exporting the HEAD of each submodule from git to the trunk of SVN"
		git submodule init
		git submodule update
		git config -f .gitmodules --get-regexp '^submodule\..*\.path$' |
			while read path_key path
			do
				#url_key=$(echo $path_key | sed 's/\.path/.url/')
				#url=$(git config -f .gitmodules --get "$url_key")
				#git submodule add $url $path
				echo "This is the submodule path: $path"
				echo "The following line is the command to checkout the submodule."
				echo "git submodule foreach --recursive 'git checkout-index -a -f --prefix=$SVNPATH/trunk/$path/'"
				git submodule foreach --recursive 'git checkout-index -a -f --prefix=$SVNPATH/trunk/$path/'
			done
fi

echo

# Support for the /assets folder on the .org repo.
echo "Moving assets."
# Make the directory if it doesn't already exist
mkdir -p $SVNPATH/assets/
mv $SVNPATH/trunk/assets/* $SVNPATH/assets/
svn add --force-interactive $SVNPATH/assets/
svn delete --force-interactive $SVNPATH/trunk/assets

echo

echo "Changing directory to SVN and committing to trunk."
cd $SVNPATH/trunk/
# Delete all files that should not now be added.
# Use $SVNIGNORE for `rm -rf`. Setting propset svn:ignore seems flaky.
echo "$SVNIGNORE" | awk '{print $0}' | xargs rm -rf
svn status | grep -v "^.[ \t]*\..*" | grep "^\!" | awk '{print $2"@"}' | xargs svn del
# Add all new files that are not set to be ignored
svn status | grep -v "^.[ \t]*\..*" | grep "^?" | awk '{print $2"@"}' | xargs svn add
svn commit --username=$SVNUSER -m "Preparing for $PLUGINVERSION release"

echo

echo "Updating WordPress plugin repo assets and committing."
cd $SVNPATH/assets/
# Delete all new files that are not set to be ignored
svn status | grep -v "^.[ \t]*\..*" | grep "^\!" | awk '{print $2"@"}' | xargs svn del
# Add all new files that are not set to be ignored
svn status | grep -v "^.[ \t]*\..*" | grep "^?" | awk '{print $2"@"}' | xargs svn add
svn update --quiet --accept working $SVNPATH/assets/*
svn resolve --accept working $SVNPATH/assets/*
svn commit --username=$SVNUSER -m "Updating assets"

echo

echo "Creating new SVN tag and committing it."
cd $SVNPATH
svn copy --quiet trunk/ tags/$PLUGINVERSION/
# Remove assets and trunk directories from tag directory
svn delete --force-interactive --quiet $SVNPATH/tags/$PLUGINVERSION/assets
svn delete --force-interactive --quiet $SVNPATH/tags/$PLUGINVERSION/trunk
svn update --force-interactive --accept working $SVNPATH/tags/$PLUGINVERSION
#svn resolve --accept working $SVNPATH/tags/$PLUGINVERSION/*
cd $SVNPATH/tags/$PLUGINVERSION
svn commit --username=$SVNUSER -m "Tagging version $PLUGINVERSION"

echo

echo "Removing temporary directory $SVNPATH."
cd $SVNPATH
cd ..
rm -fr $SVNPATH/

echo "*** FIN ***"

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

VAR_CURRENTDIR=$(pwd)

VAR_PLUGINSLUG="CHANGE_ME"

VAR_SVN_USERNAME="CHANGE_ME"

default_svnpath="$VAR_CURRENTDIR/tmp"

default_svnurl="https://plugins.svn.wordpress.org/$VAR_PLUGINSLUG"

default_plugindir="$VAR_CURRENTDIR"

default_mainfile="$VAR_PLUGINSLUG.php"

echo

echo "WordPress Plugin SVN Deploy v3.1.0"

echo

echo "Let's collect some information first. There are six questions."

echo

echo "Default values are in brackets - just hit enter to accept them."

echo

# Get some user input

# Can't use the -i flag for read, since that doesn't work for bash 3

printf "Q1. WordPress Repo Plugin Slug e.g. my-awesome-plugin: "

printf "($VAR_PLUGINSLUG): "

read -e input

input="${input%/}" # Strip trailing slash

echo

echo "Q2. Your local plugin root directory (the Git repo)."

printf "($default_plugindir): "

read -e input

input="${input%/}" # Strip trailing slash

PLUGINDIR="${input:-$default_plugindir}" # Populate with default if empty

echo

# Check directory exists.

if [ ! -d "$PLUGINDIR" ]; then

echo "Directory $PLUGINDIR not found. Aborting."

exit 1;

printf "Q3. Name of the main plugin file ($default_mainfile): "

read -e input

MAINFILE="${input:-$default_mainfile}" # Populate with default if empty

echo

# Check main plugin file exists.

if [ ! -f "$PLUGINDIR/$MAINFILE" ]; then

echo "Plugin file $PLUGINDIR/$MAINFILE not found. Aborting."

exit 1;

echo "Checking version in main plugin file matches version in readme.txt file..."

echo

# Check version in readme.txt is the same as plugin file after translating both to Unix line breaks to work around grep's failure to identify Mac line breaks

PLUGINVERSION=$(grep -i "Version:" $PLUGINDIR/$MAINFILE | awk -F' ' '{print $NF}' | tr -d '\r')

echo "$MAINFILE version: $PLUGINVERSION"

READMEVERSION=$(grep -i "Stable tag:" $PLUGINDIR/readme.txt | awk -F' ' '{print $NF}' | tr -d '\r')

echo "readme.txt version: $READMEVERSION"

if [ "$READMEVERSION" = "trunk" ]; then

echo "Version in readme.txt & $MAINFILE don't match, but Stable tag is trunk. Let's continue..."

elif [ "$PLUGINVERSION" != "$READMEVERSION" ]; then

echo "Version in readme.txt & $MAINFILE don't match. Exiting...."

exit 1;

elif [ "$PLUGINVERSION" = "$READMEVERSION" ]; then

echo "Versions match in readme.txt and $MAINFILE. Let's continue..."

echo

echo "Q4. Path to a local directory where a temporary SVN checkout can be made."

printf "Don't add trunk ($default_svnpath): "

read -e input

input="${input%/}" # Strip trailing slash

SVNPATH="${input:-$default_svnpath}" # Populate with default if empty

echo

echo "Q5. Remote SVN repo on WordPress.org."

printf "($default_svnurl): "

read -e input

input="${input%/}" # Strip trailing slash

SVNURL="${input:-$default_svnurl}" # Populate with default if empty

echo

printf "Q6. Your WordPress repo SVN username ($VAR_SVN_USERNAME): "

read -e input

SVNUSER="${input:-$VAR_SVN_USERNAME}" # Populate with default if empty

echo

echo "That's all of the data collected."

echo

echo "Slug: $VAR_PLUGINSLUG"

echo "Plugin directory: $PLUGINDIR"

echo "Main file: $MAINFILE"

echo "Temp checkout path: $SVNPATH"

echo "Remote SVN repo: $SVNURL"

echo "SVN username: $SVNUSER"

echo

printf "OK to proceed (Y|n)? "

read -e input

PROCEED="${input:-y}"

echo

# Allow user cancellation

if [ $(echo "$PROCEED" |tr [:upper:] [:lower:]) != "y" ]; then echo "Aborting..."; exit 1; fi

# Let's begin...

echo ".........................................."

echo

echo "Preparing to deploy WordPress plugin"

echo

echo ".........................................."

echo

echo "Changing to $PLUGINDIR"

cd $PLUGINDIR

# Check for git tag (may need to allow for leading "v"?)

# if git show-ref --tags --quiet --verify -- "refs/tags/$PLUGINVERSION"

if git show-ref --tags --quiet --verify -- "refs/tags/$PLUGINVERSION"

then

echo "Git tag $PLUGINVERSION does exist. Let's continue..."

else

echo "$PLUGINVERSION does not exist as a git tag. Aborting.";

exit 1;

echo

echo "Creating local copy of SVN repo trunk..."

svn checkout $SVNURL $SVNPATH --depth immediates

svn update --quiet $SVNPATH/trunk --set-depth infinity

echo "Ignoring GitHub specific files"

# Use local .svnignore if present

if [ -f ".svnignore" ]; then

echo "Using local .svnignore"

SVNIGNORE=$( <.svnignore )

else

echo "Using default .svnignore"

SVNIGNORE="README.md

Thumbs.db

.github

.git

.gitattributes

.gitignore

composer.lock"

svn propset svn:ignore \""$SVNIGNORE"\" "$SVNPATH/trunk/"

echo "Exporting the HEAD of master from git to the trunk of SVN"

git checkout-index -a -f --prefix=$SVNPATH/trunk/

# If submodule exist, recursively check out their indexes

if [ -f ".gitmodules" ]

then

echo "Exporting the HEAD of each submodule from git to the trunk of SVN"

git submodule init

git submodule update

git config -f .gitmodules --get-regexp '^submodule\..*\.path$' |

while read path_key path

#url_key=$(echo $path_key | sed 's/\.path/.url/')

#url=$(git config -f .gitmodules --get "$url_key")

#git submodule add $url $path

echo "This is the submodule path: $path"

echo "The following line is the command to checkout the submodule."

echo "git submodule foreach --recursive 'git checkout-index -a -f --prefix=$SVNPATH/trunk/$path/'"

git submodule foreach --recursive 'git checkout-index -a -f --prefix=$SVNPATH/trunk/$path/'

done

echo

# Support for the /assets folder on the .org repo.

echo "Moving assets."

# Make the directory if it doesn't already exist

mkdir -p $SVNPATH/assets/

mv $SVNPATH/trunk/assets/* $SVNPATH/assets/

svn add --force-interactive $SVNPATH/assets/

svn delete --force-interactive $SVNPATH/trunk/assets

echo

echo "Changing directory to SVN and committing to trunk."

cd $SVNPATH/trunk/

# Delete all files that should not now be added.

# Use $SVNIGNORE for `rm -rf`. Setting propset svn:ignore seems flaky.

echo "$SVNIGNORE" | awk '{print $0}' | xargs rm -rf

svn status | grep -v "^.[ \t]*\..*" | grep "^\!" | awk '{print $2"@"}' | xargs svn del

# Add all new files that are not set to be ignored

svn status | grep -v "^.[ \t]*\..*" | grep "^?" | awk '{print $2"@"}' | xargs svn add

svn commit --username=$SVNUSER -m "Preparing for $PLUGINVERSION release"

echo

echo "Updating WordPress plugin repo assets and committing."

cd $SVNPATH/assets/

# Delete all new files that are not set to be ignored

svn status | grep -v "^.[ \t]*\..*" | grep "^\!" | awk '{print $2"@"}' | xargs svn del

# Add all new files that are not set to be ignored

svn status | grep -v "^.[ \t]*\..*" | grep "^?" | awk '{print $2"@"}' | xargs svn add

svn update --quiet --accept working $SVNPATH/assets/*

svn resolve --accept working $SVNPATH/assets/*

svn commit --username=$SVNUSER -m "Updating assets"

echo

echo "Creating new SVN tag and committing it."

cd $SVNPATH

svn copy --quiet trunk/ tags/$PLUGINVERSION/

# Remove assets and trunk directories from tag directory

svn delete --force-interactive --quiet $SVNPATH/tags/$PLUGINVERSION/assets

svn delete --force-interactive --quiet $SVNPATH/tags/$PLUGINVERSION/trunk

svn update --force-interactive --accept working $SVNPATH/tags/$PLUGINVERSION

#svn resolve --accept working $SVNPATH/tags/$PLUGINVERSION/*

cd $SVNPATH/tags/$PLUGINVERSION

svn commit --username=$SVNUSER -m "Tagging version $PLUGINVERSION"

echo

echo "Removing temporary directory $SVNPATH."

cd $SVNPATH

cd ..

rm -fr $SVNPATH/

echo "*** FIN ***"

S2W Payments plugin for WordPress

After developing on WordPress, I decided to contribute back to the community by creating a free plugin for WooCommerce and Square users. You can download the plug on WordPress.org or fork the source on Github. It’s basically allows you to filter fulfilled payments made to your Square account within WordPress and import them into WooCommerce as orders. This is usefull if you want to sync your sales on Square made via their Point of Sales App (POS) and your online store on WooCommerce. The only caveat is that the SKU’s on both your WooCommerce and Square products must match so we can get the price. I didn’t bother with a create product feature since there’s a product sync feature already in the Square payment gateway plugin for WooCommerce already.

I hope to make more plugins in the future if any good and worth while ideas come to mind. In the mean time, I do hope this plugin helps a few small business owners out there.

How I secured my WordPress site

I recently came across malware in my WordPress installation even though I am running the latest version of WordPress and not running any other plugin apart from JetPack. I tried removing the malware and updating all the WordPress files only to get infected again a few days after. So Far these steps have mitigated the malware from infecting and/or penetrating my site.

.htaccess conditions

I added these rules to my .htaccess file. This will append or replace the existing rules of WordPress as well as the WordFence Plugin if you use it,

# BEGIN WordPress
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^index\.php$ - [L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule . /index.php [L]

	# protect wp-admin and wp-incluide
	RewriteRule ^wp-admin/includes/ - [F,L]
	RewriteRule !^wp-includes/ - [S=3]
	RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
	RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
	RewriteRule ^wp-includes/theme-compat/ - [F,L]

	# Block suspicious request methods
	RewriteCond %{REQUEST_METHOD} ^(HEAD|TRACE|DELETE|TRACK|DEBUG) [NC]
	RewriteRule ^(.*)$ - [F,L]

	# Block WP timthumb hack
	RewriteCond %{REQUEST_URI} (timthumb\.php|phpthumb\.php|thumb\.php|thumbs\.php) [NC]
	RewriteRule . - [S=1]

	# Block suspicious user agents and requests
	RewriteCond %{HTTP_USER_AGENT} (libwww-perl|wget|python|nikto|curl|scan|java|winhttp|clshttp|loader) [NC,OR]
	RewriteCond %{HTTP_USER_AGENT} (<|>|'|%0A|%0D|%27|%3C|%3E|%00) [NC,OR]
	RewriteCond %{HTTP_USER_AGENT} (;|<|>|'|"|\)|\(|%0A|%0D|%22|%27|%28|%3C|%3E|%00).*(libwww-perl|wget|python|nikto|curl|scan|java|winhttp|HTTrack|clshttp|archiver|loader|email|harvest|extract|grab|miner) [NC,OR]
	RewriteCond %{THE_REQUEST} \?\ HTTP/ [NC,OR]
	RewriteCond %{THE_REQUEST} \/\*\ HTTP/ [NC,OR]
	RewriteCond %{THE_REQUEST} etc/passwd [NC,OR]
	RewriteCond %{THE_REQUEST} cgi-bin [NC,OR]
	RewriteCond %{THE_REQUEST} (%0A|%0D) [NC,OR]

	# Block MySQL injections, RFI, base64, etc.
	RewriteCond %{QUERY_STRING} [a-zA-Z0-9_]=http:// [OR]
	RewriteCond %{QUERY_STRING} [a-zA-Z0-9_]=http%3A%2F%2F [OR]
	RewriteCond %{QUERY_STRING} [a-zA-Z0-9_]=(\.\.//?)+ [OR]
	RewriteCond %{QUERY_STRING} [a-zA-Z0-9_]=/([a-z0-9_.]//?)+ [NC,OR]
	RewriteCond %{QUERY_STRING} \=PHP[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12} [NC,OR]
	RewriteCond %{QUERY_STRING} (\.\./|\.\.) [OR]
	RewriteCond %{QUERY_STRING} ftp\: [NC,OR]
	RewriteCond %{QUERY_STRING} http\: [NC,OR]
	RewriteCond %{QUERY_STRING} https\: [NC,OR]
	RewriteCond %{QUERY_STRING} \=\|w\| [NC,OR]
	RewriteCond %{QUERY_STRING} ^(.*)/self/(.*)$ [NC,OR]
	RewriteCond %{QUERY_STRING} ^(.*)cPath=http://(.*)$ [NC,OR]
	RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E) [NC,OR]
	RewriteCond %{QUERY_STRING} (<|%3C)([^s]*s)+cript.*(>|%3E) [NC,OR]
	RewriteCond %{QUERY_STRING} (\<|%3C).*iframe.*(\>|%3E) [NC,OR]
	RewriteCond %{QUERY_STRING} (<|%3C)([^i]*i)+frame.*(>|%3E) [NC,OR]
	RewriteCond %{QUERY_STRING} base64_encode.*\(.*\) [NC,OR]
	RewriteCond %{QUERY_STRING} base64_(en|de)code[^(]*\([^)]*\) [NC,OR]
	RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]
	RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2}) [OR]
	RewriteCond %{QUERY_STRING} ^.*(\[|\]|\(|\)|<|>).* [NC,OR]
	RewriteCond %{QUERY_STRING} (NULL|OUTFILE|LOAD_FILE) [OR]
	RewriteCond %{QUERY_STRING} (\./|\../|\.../)+(motd|etc|bin) [NC,OR]
	RewriteCond %{QUERY_STRING} (localhost|loopback|127\.0\.0\.1) [NC,OR]
	RewriteCond %{QUERY_STRING} (<|>|'|%0A|%0D|%27|%3C|%3E|%00) [NC,OR]
	RewriteCond %{QUERY_STRING} concat[^\(]*\( [NC,OR]
	RewriteCond %{QUERY_STRING} union([^s]*s)+elect [NC,OR]
	RewriteCond %{QUERY_STRING} union([^a]*a)+ll([^s]*s)+elect [NC,OR]
	RewriteCond %{QUERY_STRING} (;|<|>|'|"|\)|%0A|%0D|%22|%27|%3C|%3E|%00).*(/\*|union|select|insert|drop|delete|update|cast|create|char|convert|alter|declare|order|script|set|md5|benchmark|encode) [NC,OR]

	# PHP-CGI Vulnerability
	RewriteCond %{QUERY_STRING} ^(%2d|\-)[^=]+$ [NC,OR]

	#proc/self/environ? no way!
	RewriteCond %{QUERY_STRING} proc\/self\/environ [NC,OR]

	RewriteCond %{QUERY_STRING} (sp_executesql) [NC]
	RewriteRule ^(.*)$ - [F,L]
</IfModule>

<files wp-config.php>
	order allow,deny
	deny from all
</files>
# END WordPress

# Wordfence WAF
<Files ".user.ini">
<IfModule mod_authz_core.c>
	Require all denied
</IfModule>
<IfModule !mod_authz_core.c>
	Order deny,allow
	Deny from all
</IfModule>
</Files>

# END Wordfence WAF

# BEGIN WordPress

RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

# protect wp-admin and wp-incluide

RewriteRule ^wp-admin/includes/ - [F,L]

RewriteRule !^wp-includes/ - [S=3]

RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]

RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]

RewriteRule ^wp-includes/theme-compat/ - [F,L]

# Block suspicious request methods

RewriteCond %{REQUEST_METHOD} ^(HEAD|TRACE|DELETE|TRACK|DEBUG) [NC]

RewriteRule ^(.*)$ - [F,L]

# Block WP timthumb hack

RewriteCond %{REQUEST_URI} (timthumb\.php|phpthumb\.php|thumb\.php|thumbs\.php) [NC]

RewriteRule . - [S=1]

# Block suspicious user agents and requests

RewriteCond %{HTTP_USER_AGENT} (libwww-perl|wget|python|nikto|curl|scan|java|winhttp|clshttp|loader) [NC,OR]

RewriteCond %{HTTP_USER_AGENT} (<|>|'|%0A|%0D|%27|%3C|%3E|%00) [NC,OR]

RewriteCond %{HTTP_USER_AGENT} (;|<|>|'|"|\)|\(|%0A|%0D|%22|%27|%28|%3C|%3E|%00).*(libwww-perl|wget|python|nikto|curl|scan|java|winhttp|HTTrack|clshttp|archiver|loader|email|harvest|extract|grab|miner) [NC,OR]

RewriteCond %{THE_REQUEST} \?\ HTTP/ [NC,OR]

RewriteCond %{THE_REQUEST} \/\*\ HTTP/ [NC,OR]

RewriteCond %{THE_REQUEST} etc/passwd [NC,OR]

RewriteCond %{THE_REQUEST} cgi-bin [NC,OR]

RewriteCond %{THE_REQUEST} (%0A|%0D) [NC,OR]

# Block MySQL injections, RFI, base64, etc.

RewriteCond %{QUERY_STRING} [a-zA-Z0-9_]=http:// [OR]

RewriteCond %{QUERY_STRING} [a-zA-Z0-9_]=http%3A%2F%2F [OR]

RewriteCond %{QUERY_STRING} [a-zA-Z0-9_]=(\.\.//?)+ [OR]

RewriteCond %{QUERY_STRING} [a-zA-Z0-9_]=/([a-z0-9_.]//?)+ [NC,OR]

RewriteCond %{QUERY_STRING} \=PHP[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12} [NC,OR]

RewriteCond %{QUERY_STRING} (\.\./|\.\.) [OR]

RewriteCond %{QUERY_STRING} ftp\: [NC,OR]

RewriteCond %{QUERY_STRING} http\: [NC,OR]

RewriteCond %{QUERY_STRING} https\: [NC,OR]

RewriteCond %{QUERY_STRING} \=\|w\| [NC,OR]

RewriteCond %{QUERY_STRING} ^(.*)/self/(.*)$ [NC,OR]

RewriteCond %{QUERY_STRING} ^(.*)cPath=http://(.*)$ [NC,OR]

RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E) [NC,OR]

RewriteCond %{QUERY_STRING} (<|%3C)([^s]*s)+cript.*(>|%3E) [NC,OR]

RewriteCond %{QUERY_STRING} (\<|%3C).*iframe.*(\>|%3E) [NC,OR]

RewriteCond %{QUERY_STRING} (<|%3C)([^i]*i)+frame.*(>|%3E) [NC,OR]

RewriteCond %{QUERY_STRING} base64_encode.*$.*$ [NC,OR]

RewriteCond %{QUERY_STRING} base64_(en|de)code[^(]*$[^)]*$ [NC,OR]

RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]

RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2}) [OR]

RewriteCond %{QUERY_STRING} ^.*(\[|\]|$|$|<|>).* [NC,OR]

RewriteCond %{QUERY_STRING} (NULL|OUTFILE|LOAD_FILE) [OR]

RewriteCond %{QUERY_STRING} (\./|\../|\.../)+(motd|etc|bin) [NC,OR]

RewriteCond %{QUERY_STRING} (localhost|loopback|127\.0\.0\.1) [NC,OR]

RewriteCond %{QUERY_STRING} (<|>|'|%0A|%0D|%27|%3C|%3E|%00) [NC,OR]

RewriteCond %{QUERY_STRING} concat[^\(]*\( [NC,OR]

RewriteCond %{QUERY_STRING} union([^s]*s)+elect [NC,OR]

RewriteCond %{QUERY_STRING} union([^a]*a)+ll([^s]*s)+elect [NC,OR]

RewriteCond %{QUERY_STRING} (;|<|>|'|"|\)|%0A|%0D|%22|%27|%3C|%3E|%00).*(/\*|union|select|insert|drop|delete|update|cast|create|char|convert|alter|declare|order|script|set|md5|benchmark|encode) [NC,OR]

# PHP-CGI Vulnerability

RewriteCond %{QUERY_STRING} ^(%2d|\-)[^=]+$ [NC,OR]

#proc/self/environ? no way!

RewriteCond %{QUERY_STRING} proc\/self\/environ [NC,OR]

RewriteCond %{QUERY_STRING} (sp_executesql) [NC]

RewriteRule ^(.*)$ - [F,L]

</IfModule>

order allow,deny

deny from all

</files>

# END WordPress

# Wordfence WAF

Require all denied

</IfModule>

Order deny,allow

Deny from all

</IfModule>

</Files>

# END Wordfence WAF

Installed WordFence and Really Simple SSL Plug-in

I installed WordFence to scan and replace WordPress core files. I only use the free version, though there is a premium version available with more automation features. I also installed a SSL certificate on my server and installed Really Simple SSL to force HTTPS on my main site.

Updated passwords and changed DB table prefix

If you haven’t already, I updated all database and user passwords in my current WordPress installation as well as changing the default database table prefix (wp_) to something obscure.

Set file and directory permissions

Set directories to 755 and files to 644. I simply run these commands via SSH

cd /home/user/domains/domain.com/public_html
find . -type d -exec chmod 0755 {} \;
find . -type f -exec chmod 0644 {} \;

cd /home/user/domains/domain.com/public_html

find . -type d -exec chmod 0755 {} \;

find . -type f -exec chmod 0644 {} \;

Limit or disable access to XML-RPC

I use .htaccess to limit access to the xmlrpc.php file since I use the WordPress app. You can opt to simply deny access to the file all together if you don’t plan on using it.

# Block WordPress xmlrpc.php requests 
# Allow Jetpack IP's 
<Files xmlrpc.php>
	order deny,allow
	deny from all
	Allow from 192.0.64.0/18
	Satisfy All
</Files>

# Block WordPress xmlrpc.php requests

# Allow Jetpack IP's

order deny,allow

deny from all

Allow from 192.0.64.0/18

Satisfy All

</Files>

Gulp Pipeline update

I encountered some errors compiling old projects using my old node workflow which turned out to be the result of a lot of the packages being deprecated.

gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.

1	gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.

Luckily it was an easy fix, I simple had to install the Windows build tools, then I was back on track.

npm install --global --production windows-build-tools

1	npm install --global --production windows-build-tools

SSD cloud hosting for cheap

I decided to try Linode
Cloud hosting

for 10USD (500PHP) a month. You get a high performance VPS which can run several sites for cheap, the only catch is you have to set it up and maintain it yourself. Here’s what I did to get mine up and running in a couple of minutes:

I started by creating an Ubuntu 16.04 LTS node,
then secured my server with their Securing Your Server guide. I also created another user group to make uploading files later easier, then add the non-root user to that group:

sudo adduser <username> www-data
sudo chgrp -R www-data /var/www; sudo chmod -R g+rw /var/www
sudo find /var/www -type d -print0 | sudo xargs -0 chmod g+s

sudo adduser <username> www-data

sudo chgrp -R www-data /var/www; sudo chmod -R g+rw /var/www

sudo find /var/www -type d -print0 | sudo xargs -0 chmod g+s

I installed Apache next with their guide: Hosting a Website. I then change some settings in my Apache config but adding some mods I use like mod_rewrite:

sudo a2enmod rewrite

1	sudo a2enmod rewrite

I then install mySQL and lock it down using the following commands, which are also found in the Linode Guide:

sudo apt-get install mysql-server
sudo mysql_secure_installation

1 2	sudo apt-get install mysql-server sudo mysql_secure_installation

The I optimize my my.cnf for my puny 2GB server (/etc/mysql/my.cnf):

[mysqld]

max_allowed_packet = 1M
thread_stack = 128K
max_connections = 75

table_open_cache = 32M
key_buffer_size = 32

[mysqld]

max_allowed_packet = 1M

thread_stack = 128K

max_connections = 75

table_open_cache = 32M

key_buffer_size = 32

Ubuntu 16.04 LTS does not have support for PHP5 anymore so I used PHP7, so I installed that with the following commands:

sudo apt-get -y install php7.0 libapache2-mod-php7.0

1	sudo apt-get -y install php7.0 libapache2-mod-php7.0

then I install some extensions I need like mySQL, curl etc. THe first commands list the available PHP extensions, then second installs the ones I use.

sudo apt-cache search php7.0

sudo apt-get -y install php7.0-mysql php7.0-curl php7.0-gd php7.0-intl
php-pear php-imagick php7.0-imap php7.0-mcrypt php-memcache
php7.0-pspell php7.0-recode php7.0-sqlite3 php7.0-tidy php7.0-xmlrpc
php7.0-xsl php7.0-mbstring php-gettext

sudo apt-cache search php7.0

sudo apt-get -y install php7.0-mysql php7.0-curl php7.0-gd php7.0-intl

php-pear php-imagick php7.0-imap php7.0-mcrypt php-memcache

php7.0-pspell php7.0-recode php7.0-sqlite3 php7.0-tidy php7.0-xmlrpc

php7.0-xsl php7.0-mbstring php-gettext

We’ll need to install postfix also so PHP’s mail() function will work.

sudo
apt-get install postfix

1 2	sudo apt-get install postfix

Be sure to set “Internet Site: in the configuration dialog. The sendmail_path should be pre-configured correctly already, if not simply set it to:
/usr/sbin/sendmail -t -i

I now Install my FTP server, I use FileZilla since I use the client on my machine natively, then simply connect via SSH/SFTP

sudo apt-get install filezilla

1	sudo apt-get install filezilla

Once that is done, I simply point my domains to my server IP. Linode offers a DNS Manager but I prefer to use GoDaddy’s for simplicity. Hen the IP resolves, I test all my settings then I am off!

UPDATE:

When adding new sites or downloading scripts via wget you’ll need to set permissions again to be able to modify them via FTP: So I add my FTP user to the www-data group so I do not have permission errors.

sudo usermod -a -G www-data <username>
sudo chmod -R 775 /var/www
sudo chown -R www-data:www-data /var/www

sudo usermod -a -G www-data <username>

sudo chmod -R 775 /var/www

sudo chown -R www-data:www-data /var/www

Gulp! My assets pipeline 2.0 on WIndows

This is an update to my previous setup I wrote about on: How I build my assets pipeline on Windows using NodeJS. This time around I use Gulp to simplify things and add more automation.

First up, you’ll need to install gulp globally (npm i -g gulp) if you haven’t yet, then install it in your project directory (npm i gulp -D). The goal is accomplish the following automatically:

compile and minify my javascript files when changes are made
compile and compress my sass into css when changes are made
automatically reload my browser when the css/js is compiled

Here’s a list of the plugins I use and what they in relation to my workflow. This assumes you are familiar with NodeJS already, if not you may read this post first.

gulp-concat – concatenate css and/or JavaScript files
gulp-uglify – compress our JavaScript
gulp-sass – libsass compiler for our css
gulp-autoprefixer – add vendor prefixes to our compiled css
gulp-imagemin – compress images (jpg, png, svg, gif) and some plugins for it
- imagemin-pngquant – PNG
- imagemin-zopfli – also for PNG’s
- imagemin-mozjpeg – lossy compression plugin. Works in conjunction with JpegTran
gulp-livereload – automatically reloads the page in chrome using the livereload chrome extension.

Some none-gulp plugins we’ll also need are:

browserify – dynamically load javascript libraries into our project
event-stream – merge multiple gulp source files for our .css and .js files
vinyl-source-stream & vinyl-buffer – needed to uglify our browserify js file

Once you have all these installed, create a gulpfile.js in your project directory (where your package.json is) then you can start creating task. In my setup, I simply run the gulp command to watch my JavaScript and sass files, compile them, and reload the browser. I have a different gulp task to compress the images since this is not done often. Note that the paths may vary depending on how you structure your working environment.

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var terser = require('gulp-terser');
var concat = require('gulp-concat');
var es = require('event-stream');
var merge = require('merge-stream');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var livereload = require('gulp-livereload');
var imagemin = require('gulp-imagemin');
var imageminPngquant = require('imagemin-pngquant');
var imageminZopfli = require('imagemin-zopfli');
var imageminMozjpeg = require('imagemin-mozjpeg');

gulp.task('scripts', function() {
	var results = [];
	results.push(browserify('client/index.js')
			.bundle()
			.pipe(source('bundle.min.js'))
			.pipe(buffer())
			.pipe(terser())
			.pipe(gulp.dest('public/assets/js')));

	results.push(browserify('client/index.js')
			.bundle()
			.pipe(source('bundle.js'))
			.pipe(buffer())
			.pipe(gulp.dest('public/assets/js')));
	return merge(results);
});

gulp.task('styles', function() {
	var sassStream = gulp.src('client/*.scss')
						.pipe( sass({ 
								outputStyle: 'expanded', 
								errLogToConsole: true 
							}) 
						);
	var results = [];

	results.push(es.merge(sassStream)
				.pipe(concat('bundle.min.css'))
				.pipe(autoprefixer())
				.pipe(cleanCSS({}))
				.pipe(gulp.dest('public/assets/css'))
				.pipe(livereload()));

	results.push(es.merge(sassStream)
				.pipe(concat('bundle.css'))
				.pipe(autoprefixer())
				.pipe(cleanCSS({
					format:{
						breaks: { 
							afterAtRule: true,
							afterBlockBegins: true,
							afterBlockEnds: true,
							afterComment: true,
							afterProperty: true,
							afterRuleBegins: true,
							afterRuleEnds: true,
							beforeBlockEnds: true,
							betweenSelectors: true
						},
						spaces: {
							aroundSelectorRelation: true,
							beforeBlockBegins: true,
							beforeValue: true
						},
						indentBy:1,
						indentWith: 'tab'
					}
				}))
				.pipe(gulp.dest('public/assets/css'))
				.pipe(livereload()));
	return merge(results);
});

gulp.task('images', function() {
	return gulp.src('client/img/*.{jpg,png,svg,gif}')
				.pipe(imagemin([
					//gif lossless
					imagemin.gifsicle({
						interlaced: true,
						optimizationLevel: 3
					}),
					//svg
					imagemin.svgo({
						plugins: [{
							removeViewBox: false
						}]
					}),
					//png lossless
					imageminPngquant(),
					imageminZopfli({
						more: true
					}),
					//jpg lossless
					imagemin.jpegtran({
						progressive: true
					}),
					//jpeg lossy
					imageminMozjpeg({
						quality: 90
					})
				]))
				.pipe(gulp.dest('public/assets/img'))
});

gulp.task('default', function() {
	livereload.listen();
	gulp.watch('client/*.js', gulp.series('scripts'));
	gulp.watch('client/*.scss', gulp.series('styles'));
	gulp.watch('client/img/*.*', gulp.series('images'));
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

var gulp = require('gulp');

var cleanCSS = require('gulp-clean-css');

var terser = require('gulp-terser');

var concat = require('gulp-concat');

var es = require('event-stream');

var merge = require('merge-stream');

var sass = require('gulp-sass');

var autoprefixer = require('gulp-autoprefixer');

var browserify = require('browserify');

var source = require('vinyl-source-stream');

var buffer = require('vinyl-buffer');

var livereload = require('gulp-livereload');

var imagemin = require('gulp-imagemin');

var imageminPngquant = require('imagemin-pngquant');

var imageminZopfli = require('imagemin-zopfli');

var imageminMozjpeg = require('imagemin-mozjpeg');

gulp.task('scripts', function() {

var results = [];

results.push(browserify('client/index.js')

.bundle()

.pipe(source('bundle.min.js'))

.pipe(buffer())

.pipe(terser())

.pipe(gulp.dest('public/assets/js')));

results.push(browserify('client/index.js')

.bundle()

.pipe(source('bundle.js'))

.pipe(buffer())

.pipe(gulp.dest('public/assets/js')));

return merge(results);

});

gulp.task('styles', function() {

var sassStream = gulp.src('client/*.scss')

.pipe( sass({

outputStyle: 'expanded',

errLogToConsole: true

})

);

var results = [];

results.push(es.merge(sassStream)

.pipe(concat('bundle.min.css'))

.pipe(autoprefixer())

.pipe(cleanCSS({}))

.pipe(gulp.dest('public/assets/css'))

.pipe(livereload()));

results.push(es.merge(sassStream)

.pipe(concat('bundle.css'))

.pipe(autoprefixer())

.pipe(cleanCSS({

format:{

breaks: {

afterAtRule: true,

afterBlockBegins: true,

afterBlockEnds: true,

afterComment: true,

afterProperty: true,

afterRuleBegins: true,

afterRuleEnds: true,

beforeBlockEnds: true,

betweenSelectors: true

spaces: {

aroundSelectorRelation: true,

beforeBlockBegins: true,

beforeValue: true

indentBy:1,

indentWith: 'tab'

}

}))

.pipe(gulp.dest('public/assets/css'))

.pipe(livereload()));

return merge(results);

});

gulp.task('images', function() {

return gulp.src('client/img/*.{jpg,png,svg,gif}')

.pipe(imagemin([

//gif lossless

imagemin.gifsicle({

interlaced: true,

optimizationLevel: 3

}),

//svg

imagemin.svgo({

plugins: [{

removeViewBox: false

}]

}),

//png lossless

imageminPngquant(),

imageminZopfli({

more: true

}),

//jpg lossless

imagemin.jpegtran({

progressive: true

}),

//jpeg lossy

imageminMozjpeg({

quality: 90

})

]))

.pipe(gulp.dest('public/assets/img'))

});

gulp.task('default', function() {

livereload.listen();

gulp.watch('client/*.js', gulp.series('scripts'));

gulp.watch('client/*.scss', gulp.series('styles'));

gulp.watch('client/img/*.*', gulp.series('images'));

});

UPDATE April 5, 2018 – fix for deprecated packages and missing Python executable. UPDATE: October 6, 2018 – I updated the image compress gulp task for better compression and added SVG, and GIF support. Also added the default task to trigger image compression when the source image folder contents are updated. Website Planet has an image compression tool which inspired this update.

UPDATE October 11, 2019 – updated the gulp plugin dependency changes and added a non-minified version of the bundled CSS and JS files

Delete deep nested node_modules folders

Some node modules have too much dependencies that break the WIndows NTFS file system e.g.(node-sass, gulp). There were articles mentioning that Windows 10 has removed the the limit to the maximum path length but I for one still encounter the problem… and for some reason the rm -rf command doesn’t work anymore.

So I use rimraf, which basically does what rm -rf does. Simply install it (globally) and run the command:

npm -g rimraf
rimraf <LONG_PATH_YOU_WANT_TO_DELETE>

1 2	npm -g rimraf rimraf <LONG_PATH_YOU_WANT_TO_DELETE>

Open cmd.exe here for NodeJS

Since NodeJS works off the Windows’ shell (command prompt) I find myself needing to open the terminal (cmd.exe) more often now. Here are several ways I open the Command Prompt in a specific location within Windows Explorer on Windows 10.

method 1: simply navigate to the desired folder within Windows Explorer and type cmd in the location bar then press enter.

method 2: Navigate to the desired location within Windows Explorer then press (ALT F, M) on your keyboard. This will give you an option to open either an Elevated Command window (ALT F, M, A) or a normal Command window (ALT F, M P).

method 3: hold shift on your keyboard then right click within the desired folder location within Windows Explorer. AN “Open Command window here” context menu will appear.

How I build my assets pipeline on Windows using NodeJS

I develop on Windows 10 (currently) with NodeJS, I am assuming you are running both already. Below is a bare-bones list of modules i use:

browserify – this allows my to write my JavaScript in the NodeJS convention as well as concatenate multiple JavaScript dependencies like jQuery and GSAP.
uglify-js – this will allow me to minify all my javascript code and dependencies.
watchify – will give give us the ability to monitor my javascript files for any changes.
node-sass – SASS compiler without having to know or setup Ruby. THis also compresses the output CSS code.
nodemon – monitor our scss files for any changes.
concurrently – will allow us to run multiply npm command concurrently on Windows using one terminal window.

Some optional modules I use are:
jquery and, bootstrap-sass.

Now we initialize our project with the following commands

mkdir public – this will be my webroot folder. This will be the destination folders (public/assets/css,
public/assets/js

) for the output files nodeJS will generate for us.
mkdir client – this will where my source files will be
npm init – create a package.json file for our project
npm i <module_name> -D – this is how I install the node modules i need. the -D option will put the module in our package.json as a dependency.

once all the the modules I need are installed, I openup my package.json file and write the scripts I will be using to monitor and compile my CSS and JS files. The gist is to output 2 files bundle.js and bundle.css where all dependencies and custom code are concatenated into one file respectively and compressed.

 "scripts": {
   "build-js": “browserify client/index.js | uglifyjs -o public/assets/js/bundle.js”,
   "watch-js": “watchify client/index.js -do public/assets/js/bundle.js”,
   "build-css": “node-sass –output-style compressed –include-path client/scss client/index.scss public/assets/css/bundle.css”,
   "watch-css": “nodemon -e scss -x "npm run build-css"”,
   "build-assets": “concurrently –kill-others "npm run build-js" "npm run build-css"”,
   "watch-assets": “concurrently –kill-others "npm run watch-js" "npm run watch-css"”
 },

"scripts": {

"build-js": “browserify client/index.js | uglifyjs -o public/assets/js/bundle.js”,

"watch-js": “watchify client/index.js -do public/assets/js/bundle.js”,

"build-css": “node-sass –output-style compressed –include-path client/scss client/index.scss public/assets/css/bundle.css”,

"watch-css": “nodemon -e scss -x "npm run build-css"”,

"build-assets": “concurrently –kill-others "npm run build-js" "npm run build-css"”,

"watch-assets": “concurrently –kill-others "npm run watch-js" "npm run watch-css"”

build-js – will read my index.js file which is my main node javascript file and concatenate and minify all the custom code and dependencies into my production bundle.js file.
watch-js – will monitor any changes on my index.js file then automatically compile it.
build-css– will compile all my scss files and compress it into one bundle.css file. I also included a folder where I put my other scss snippet files.
watch-css – this will monitor all .scss files specified in the watch-css command then run build-css once changes are saved on any of the files.
build-assets– will build my js and css files
watch-assets – will monitor my scss and js files and compile them once changes have been made.

Once I have this setup, i simply do npm run-watch-assets while I am developing to automatically compile all my assets on the files while I code. It’s a great time saver and cleans up my code a whole lot, especially since I only have to include 1 .js file and .css file in my html files for all the dependencies and plugins i use..

My webdev environment on Windows

Here the web development environment I have setup on my laptop. It’s simply a run-through and short tutorial of the things I use for those of you who are interested in getting into the web development scene.

To start of, here’s a list of apps I use:

WAMP – This basically has everything you need to get started; it also included some extensions you may find useful like XDebug.
Node.js – I primarily use this as a command line interface for the tools I use like Bower and Grunt.
Sublime Text – this is the best text editor I’ve used. It’s free to try but you can buy it if you like it.

Setting things up is pretty straight forward for WAMP and Node.js, configuration will be subjective so I’ll leave that to your personal preferences. Node.js already comes with npm. so you can jump right into installing Grunt and Bower via the Node.js CLI (Command Line Interface). You can also use npm in other development environments like Phonegap apps.

npm install -g bower
npm install -g grunt

1 2	npm install -g bower npm install -g grunt

If you’re on Windows like me, you will need to install GIT for Windows to get Bower working properly. You can also use this tool to manage your repositories if you have any.

After installing git you will need to add the installation path to your PATH Environment Variable, which is typically located in C:Program Files (x86)Gitcmd. You may have to restart your system for the changes to take effect.

Once you’re done with that you can turn your attention to Sublime Text. I like the simplicity versatility and light foot print it has over other text editors. Like npm it also has a a package manager called Package Control you can use to add more functionality to it. You will need to enable this by opening the Sublime Text console (Control + `) and paste the code below. For detailed instructions you can visit the installation guide.

Sublime Text 3

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Sublime Text 2

import urllib2,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

import urllib2,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

After that you will see the Package Control menu by going to Preferences > Package Control.