f2e-workflow is a cross-platform, efficient, smooth workflow for F2E project based on Grunt.
###Table of contents
4 quick start options are available:
- Download the latest release.
- Clone the repo:
git clone git@github.com:hzlzh/f2e-workflow.git
- Install with yeoman or custom it according to repo: generator-f2e :
npm install -g generator-f2e
yo f2e
- Install with Bower:
bower install f2e
Read the Getting Started page and wiki list for more.
Within the download you'll find the following directories and files, you'll see something like this:
f2e-workflow/
│
├── package.json // Project dependance
├── Gruntfile.js // Grunt task config
├── .ftppass // FTP passwork(optional): grunt-ftp-deploy
│
├── node_modules // `npm install` generate package
│
├── html/ // HTML files
│ └── index.html
├── css/ // CSS source files(e.g., `Less`/`Sass`)
│ ├── lib-reset.less
│ ├── lib-mixins.less
│ └── style.less
├── img/ // Images source [non-sprite] e.g, logo
│ ├── logo.png
│ └── background.png
├── slice/ // Slice images source [Tobe-Sprite] e.g, Icons
│ ├── icon-github.png
│ ├── icon-github@2x.png // Include 1x & 2x images
│ ├── icon-twitter.png
│ └── icon-twitter@2x.png
└── publish/ // The target folder, The final F2E output
├── css/ // The final CSS
│ └── style.css
├── img/ // just copy from `../img/`
│ ├── logo.png
│ └── background.png
└── sprite/ // Sprited automatically
└── demo.png
After run f2e-workflow
, you'll get ../publish
which is the final output.
-
Recommended: install Node.js with Brew If not installed HowTo
-
Install those two requirements via
// install GraphicsMagick library // `Xcode Command Line Tools` may be needed, please agree. brew install GraphicsMagick // install Phantomjs library brew install phantomjs // re-install node_modules, e.g. `gm` npm install
-
Run
gm version
&phantomjs --version
to test if your environment is OK.
- Install Node.js If not installed
- Download, then Install GraphicsMagick(Q8)(or 64bit) & Phantomjs
- Install
- Download Mirror: GraphicsMagick-1.3.20-Q8-win32-dll.zip
- Download Mirror: phantomjs-1.9.7-windows.zip
- At last unpack them into any of your folder Set system variable
- After install
GraphicsMagick
andPhantomjs
successfully, runnpm install
to pull the dependance package.- If you get some network trouble, you can download node_modules.zip instead.
A full f2e-workflow
include those Tasks
below:
- Compile
Less/Sass
toCSS
CSS
LintCSS
compression- Auto merge sprite images
- Auto fit
@2x
retina images - Add timestamp after
CSS
files - Watch files changes
FTP
deployZIP
package
grunt.registerTask('default', ['less:dev', 'copy:dev', 'clean:dev', 'watch']);
Output folder: ../publish/(css/ + img/ + slice/)
Note: Only do Less/Sass
-> CSS
Output folder: ../publish/(css/ + img/ + sprite/)
Note: Include Less/Sass Compile+Compression+Sprite+PNGmin(under ./img/
& ./sprite/
), without file watch
Output folder: ../publish/(css/ + img/ + sprite/)
Note: Same as grunt all
, but will not delete tmp/
folder, this is only for debug use(with file watch task inside)
Note: grunt push
will push all the output to FTP server
Note: grunt zip
will package all the output files into .zip
file
Note: copy files from slice/
to -> sprite
-> CSS compression
Note: @2x image to @1x image
Command line demo is below,
- Also a GUI tools is ready, check: Mobile-Team / spock
- WebStorm 8 is ready for
Yo
&Grunt
: WebStorm 8.0 Release Candidate
Demo Page
without Sprite Task: /demo-without-sprite/html/index.html
After the workflow,check Demo Page
/demo/html/index.html for sprite image
source code.
- Images diff under
Mac OS
&Win
is known from this [#issues] - No sprite task when you are doing a debug workflow, just run
grunt debug
if needed.
Released under MIT LICENSE