This combines html5boilerplate, jade-gulp mostly for templating, Bower and Sass linting from sass-guidelin.es. All a top of the wonderous gulp-starter from someone called greypants. Pretty much... it takes the best of everything.
alright already.
git clone git@github.com:brettwise/jade-bower-h5bp-scss-linter-gulp-starter.git
cd jade-bower-h5bp-scss-linter-gulp-starter
bash gogo-static-site.sh
cd ..
mv jade-bower-h5bp-scss-linter-gulp-starter $sitename
divshot init // followed by 5 divshot prompts
name: (my-app-name)
root directory: (current) public
clean urls: (y/n) y
error page: (error.html)
Would you like to create a Divshot.io app from this app?: (y/n) y
rm -rf .git
git init
git add -A
git commit -m "Initial commit for $sitename"
npm install
cd src/sass
bower install
cd src/js
bower install
subl .
gulp
I wanted something minimal and something that allowed me to use partials. I thought about a static site generator like Jekyll but in the end it was way more than I wanted. I just wanted partials. So I ended up settling on Jade for that purpose.
- Add in SCSS linter - https://www.npmjs.com/package/gulp-scss-lint
- Add Rules from Sass-Guidelines to above linter - http://sass-guidelin.es/#scss-lint
- Change Sass files to Scss file & Rename Folder
- Add in base bower config with things like normalize.scss & modernizr.
- Possibly add support for Sassdoc. - http://sassdoc.com/
- Possibly add support for creating and pushing to github via api. - https://stackoverflow.com/questions/2423777/is-it-possible-to-create-a-remote-repo-on-github-from-the-cli-without-ssh/10325316#10325316 - https://gist.github.com/robwierzbowski/5430952
sass-i-mean-scss-linting: This is the branch where I’m trying to add in scss linting per http://sass-guidelin.es/. I have stashed changes with the scss-lint npm package installed and inserted into sass.js for gulp but it keeps erroring out. Don’t know why. Do git stash apply to retreive changes.
Starter Gulp + Browserify project with examples of how to accomplish some common tasks and workflows. Read the blog post for more context, and check out the Wiki for some good background knowledge.
Includes the following tools, tasks, and workflows:
- Browserify (with browserify-shim)
- Watchify (caching version of browserify for super fast rebuilds)
- SASS (super fast libsass with source maps, and autoprefixer)
- CoffeeScript (with source maps!)
- BrowserSync for live reloading and a static server
- Image optimization
- Error handling in the console and in Notification Center
- Shimming non common-js vendor code with other dependencies (like a jQuery plugin)
- New Multiple bundles with shared dependencies
- New Separate compression task for production builds
- New Icon Font generation
If you've never used Node or npm before, you'll need to install Node. If you use homebrew, do:
brew install node
Otherwise, you can download and install from here.
npm install
This runs through all dependencies listed in package.json and downloads them to a node_modules folder in your project directory.
To run the version of gulp installed local to the project, in the root of your this project, you'd run
./node_modules/.bin/gulp
WAT. Why can't I just run gulp? Well, you could install gulp globally with npm install -g gulp, which will add the gulp script to your global bin folder, but it's always better to use the version that's specified in your project's package.json. My solution to this is to simply alias ./node_modules/.bin/gulp to gulp. Open up ~/.zshrc or ~./bashrc and add the following line:
alias gulp='node_modules/.bin/gulp'
Now, running gulp in the project directory will use the version specified and installed from the package.json file.
gulp
This will run the default gulp task defined in gulp/tasks/default.js, which has the following task dependencies: ['sass', 'images', 'markup', 'watch']
- The
sasstask compiles your css files. imagesmoves images copies images from a source folder, performs optimizations, the outputs them into the build foldermarkupdoesn't do anything but copy an html file over from src to build, but here is where you could do additional templating work.watchhaswatchifyas a dependency, which will run the browserifyTask with adevModeflag that enables sourcemaps and watchify, a browserify add-on that enables caching for super fast recompiling. The task itself starts watching source files and will re-run the appropriate tasks when those files change.
gulp iconFont
Generating and re-generating icon fonts is an every once and a while task, so it's not included in tasks/default.js. Run the task separately any time you add an svg to your icons folder. This task has a couple of parts.
The task calls gulp-iconfont and passes the options we've configured in gulp/config.js. Then it listens for a codepoints that triggers the generation of the sass file you'll be importing into your stylesheets. gulp/iconFont/generateIconSass passes the icon data to a template, then outputs the resulting file to your sass directory. See the gulp-iconFont docs for more config details. You may reconfigure the template to output whatever you'd like. The way it's currently set up will make icons usable as both class names and mixins.
.twitter-button
+icon--twitter // (@include in .scss syntax)or
<span class="icon -twitter"></span>There is also a production task you can run with gulp production, which will re-build optimized, compressed css and js files to the build folder, as well as output their file sizes to the console. It's a shortcut for running the following tasks: ['images', 'minifyCss', 'uglifyJs'].
All paths and plugin settings have been abstracted into a centralized config object in gulp/config.js. Adapt the paths and settings to the structure and needs of your project.
--
Social icons courtesy of icomoon.io
Made with ♥ at Viget!