1 | # Gassetic [![build status](https://travis-ci.org/crossborne/gassetic.svg?branch=master)](https://travis-ci.org/crossborne/gassetic) ![deps status](https://david-dm.org/crossborne/gassetic.png)
|
2 |
|
3 |
|
4 | ## Summary
|
5 | Gassetic is an [Assetic](https://github.com/kriswallsmith/assetic) replacement which is based on the gulp build tool for more comfortable frontend development and dependency management
|
6 |
|
7 | ## Advantages over assetic
|
8 | - Uses CSS [live reload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) (injects modified css files into page without refreshing page)
|
9 | - Easy to setup
|
10 | - Use a package manager like [Bower](http://bower.io/) for JS dependencies
|
11 | - Use the [gulp.js](http://gulpjs.com/) ecosystem to build your frontend assets
|
12 | - Less magic! Easy to follow development flow
|
13 |
|
14 | ## How it works
|
15 |
|
16 | Gassetic makes it easy to manage your frontend assets. You can install JS and CSS libs through a package manager like [Bower](http://bower.io/) and then compile them using tools from [gulp.js](http://gulpjs.com)
|
17 |
|
18 | Gassetic replaces ```"<!-- {env}:{filename} --><!-- endbuild -->"``` strings in your templates with your generated CSS and JS files. In your gassetic.yml file you can specify which files and tasks to run on the input files and the names of the output files.
|
19 |
|
20 | [Gulp](http://gulpjs.com/plugins/) has literally hundreds of plugins that you can include in your gulpfile and process on your frontend assets.
|
21 |
|
22 |
|
23 | ## Installation
|
24 |
|
25 | 1) Create your gassetic config
|
26 |
|
27 | ### yaml example with gassetic.yml
|
28 | ```yml
|
29 | requires:
|
30 | less: gulp-less
|
31 | minify: gulp-minify-css
|
32 | concat: gulp-concat
|
33 | uglify: gulp-uglify
|
34 | mimetypes:
|
35 | # This section contains the formatters for the css files
|
36 | css:
|
37 | # In 'prod' mode, use these settings
|
38 | prod:
|
39 | outputFolder: web/compiled/css # The output folder for your saving your compiled files
|
40 | webPath: /compiled/css # The web path for the compiled files
|
41 | # Run these tasks on your compiled files
|
42 | tasks:
|
43 | - { name: less }
|
44 | - { name: minify }
|
45 | - { name: concat, args: '%filename%' }
|
46 | htmlTag: '<script type="text/javascript" src="{{ asset("%path%") }}"></script>' # custom html tag
|
47 |
|
48 | # This is the list of source files to apply the above settings
|
49 | files:
|
50 | frontend.css: # This is the output filename
|
51 | - assets/css/animate.min.css
|
52 | - assets/css/swipebox.css
|
53 | - assets/vendor/bootstrap-daterangepicker/daterangepicker-bs3.css
|
54 | - assets/vendor/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css
|
55 | - assets/vendor/jquery-simplecolorpicker/jquery.simplecolorpicker.css
|
56 | - vendors/oh/emoji-bundle/Oh/EmojiBundle/vendor/emoji.css
|
57 | backend.css:
|
58 | - assets/vendor/bootstrap-daterangepicker/daterangepicker-bs3.css
|
59 | - assets/css/backend.css
|
60 |
|
61 | # Watch these files for changes (optional)
|
62 | watch:
|
63 | - assets/**/*.less
|
64 | - assets/**/*.css
|
65 |
|
66 | # This section contains the formatters for your JS files
|
67 | js:
|
68 | prod:
|
69 | outputFolder: web/compiled/js # Save the files here
|
70 | webPath: /compiled/js # Specify the web path
|
71 | tasks:
|
72 | - { name: concat, args: '%filename%' }
|
73 | - { name: uglify, args: { mangle: false } }
|
74 |
|
75 | # Here is a list of files to apply the above tasks to
|
76 | files:
|
77 | jquery.js: # This is the output filename
|
78 | - assets/vendor/jquery/jquery.js
|
79 | app.js:
|
80 | - web/html5lightbox/html5lightbox.js
|
81 | - assets/vendor/angular/angular.js
|
82 | - assets/vendor/angular-route/angular-route.js
|
83 | - assets/vendor/angular-sanitize/angular-sanitize.js
|
84 | - assets/js/tmp/angularApp.js/**/*.js
|
85 |
|
86 | # This is the list of files/paths to search and find the replacement tags to insert the
|
87 | # generated <script> or stylesheet tags
|
88 | replacementPaths:
|
89 | - web/*.html
|
90 | - includes/**/*.html
|
91 |
|
92 | default:
|
93 | - js
|
94 | - css
|
95 | ```
|
96 |
|
97 | 2) Within root of your project run:
|
98 |
|
99 | npm install gulp-less
|
100 | npm install gulp-minify-css
|
101 | npm install gulp-uglify
|
102 | npm install gulp-concat
|
103 | ... else that you need and have defined in the 'requires' section of the config
|
104 |
|
105 | 3) Update your templates from
|
106 |
|
107 | <link rel="stylesheet" ...
|
108 |
|
109 | To:
|
110 |
|
111 | <!-- prod:frontend.css --><!--endbuild-->
|
112 |
|
113 | The strings "" will be searched for in the 'replacementPaths' list in the settings and replaced with the generated tags and files
|
114 |
|
115 | 4) install gassetic ```npm install -g gassetic```
|
116 |
|
117 | 5) run ```gassetic``` for watching and livereloading the files
|
118 |
|
119 | 6) run ```gassetic build --env=prod``` for production build
|
120 |
|
121 | 7) run ```gassetic build --env=custom``` for custom build
|
122 |
|
123 | Done.
|
124 |
|
125 | ## More docs
|
126 |
|
127 | - [Using Gassetic with Symfony2](https://github.com/crossborne/gassetic/blob/master/Resources/doc/GasseticAndSymfony2.md)
|
128 | - [Advanced usage: Multiple environments](https://github.com/crossborne/gassetic/blob/master/Resources/doc/MultipleEnvironments.md)
|
129 | - [Advanced usage: Managing dependencies](https://github.com/crossborne/gassetic/blob/master/Resources/doc/ManagingDependencies.md)
|
130 | - [Advanced usage: Custom tasks](https://github.com/crossborne/gassetic/blob/master/Resources/doc/CustomTasks.md)
|
131 | - [Advanced usage: Livereload port and parameters](https://github.com/crossborne/gassetic/blob/master/Resources/doc/LivereloadConfig.md)
|
132 |
|
133 | #### @todo:
|
134 | - better readme
|
135 |
|
136 | The MIT License (MIT)
|
137 |
|
138 | Copyright (c) 2014 Roman Schejbal
|
139 |
|
\ | No newline at end of file |