Gulp boilerplate for web designers provides directory and file structure to aid web-designers kickstart their next project. It will help you develop and deploy any html-based (and more) templates. Some out of the box features :
You need to install SASS and compass ruby gems. To do that make sure you have ruby installed and then type the below commands:
gem update --systemgem install sassgem install compass
Install Gulp and required grunt tasks by typing npm install
Run gulp
File structure
Your development environment is in the app directory - you do all the work there. Whenever you are ready you can build the work by running the gulp task (the default task). This task will generate a public directory that will contain all your files (CSS, JS, HTML and images) optimized and ready to distribute/upload/share.
Tasks
You can run the below tasks.
gulp (default task) : Creates a public directory with all the optimized files (read File structure section for more details).
gulp watch : Probably the most usable task. Just run this task and whatever file you edit any file (html, scss, coffee, js, etc.) it passes it through the appropriate pipeline (task).
gulp styles : This task compiles all the Sass files and autoprefixes. After that it saves the generated CSS files expanded into the development directory and the minified version into the public directory.
gulp coffee : This task lints and compiles your coffee script files (you must include them into the js directory).
gulp lintscripts : This task lints all javascripts files except from those located under the vendor directory.
gulp scripts : This task will concatanate all scripts into one using the order you'll specify. The public version of this file will also be minified.
gulp images : This task will optimize all images (with jpg, png and gif extension) under the img folder.
gulp jade : This task will compile your jade templates.
gulp markup : This task will pretify your html files.
gulp clean : This support task cleans (deletes all the contents of) the public directory in order to prepare it for the build (default task).
请发表评论