Merge pull request #46 from marmelab/change_build_structure

[RFR] Improve build process
marmelab · Sep 23, 2014 · e55cf17 · e55cf17
2 parents b0969a6 + 44628b0
commit e55cf17
Show file tree

Hide file tree

Showing 58 changed files with 271 additions and 173 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -1,3 +1,3 @@
 {
-    "directory": "src/scripts/bower_components"
+    "directory": "src/javascripts/bower_components"
 }
diff --git a/.gitignore b/.gitignore
@@ -2,8 +2,8 @@ node_modules
 dist
 .tmp
 .sass-cache
-src/scripts/bower_components
-src/scripts/config.js
+src/javascripts/bower_components
+src/javascripts/config.js
 src/styles/*.css
-src/require
+build/require
 src/css
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -11,28 +11,40 @@ module.exports = function (grunt) {
         ngAnnotate: {
             ngadmin: {
                 files: {
-                    'src/build/ng-admin.min.js': ['src/build/ng-admin.min.js']
+                    'build/ng-admin.min.js': ['build/ng-admin.min.js']
+                }
+            }
+        },
+
+        cssmin: {
+            combine: {
+                files: {
+                    'build/ng-admin.min.css': [
+                        'build/ng-admin.css',
+                        'src/javascripts/bower_components/nprogress/nprogress.css',
+                        'src/javascripts/bower_components/humane/themes/flatty.css'
+                    ]
                 }
             }
         },
 
         uglify: {
             ngadmin: {
                 files: {
-                    'src/build/ng-admin.min.js': ['src/build/ng-admin.min.js']
+                    'build/ng-admin.min.js': ['build/ng-admin.min.js']
                 }
             }
         },
 
-        clean: {
-            build: ["src/build/app", "src/build/bower_components", "src/build/*.js", "!src/build/*.min.js"]
+        clean : {
+            build : ["build/*", "!build/*.min.js", "!build/*.min.css"]
         },
 
         connect: {
             server: {
                 options: {
                     port: 8000,
-                    base: 'src/',
+                    base: '/',
                     keepalive: true
                 }
             }
@@ -55,27 +67,13 @@ module.exports = function (grunt) {
             sass: {
                 files: ['sass/*.scss'],
                 tasks: ['assets:css']
-            },
-            livereload: {
-                files: [
-                    // livereload for css files will only inject files without reloading the page
-                    'assets/css/**/*.css',
-                    // livereload
-                    'require/*.js'
-                ],
-                options: {
-                    // true -> livereload active, but on default port 35729 (provide a number to set the port)
-                    livereload: true,
-                    // debounced since several changes can happen at the same time
-                    debounceDelay: 500
-                }
             }
         },
 
         // Test settings
         karma: {
             unit: {
-                configFile: 'test/karma.conf.js',
+                configFile: 'src/javascripts/test/karma.conf.js',
                 singleRun: true
             }
         },
@@ -92,17 +90,17 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-contrib-compass');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-connect');
-    grunt.loadNpmTasks('grunt-contrib-clean');
     grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-ng-annotate');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-clean');
     grunt.loadNpmTasks('grunt-concurrent');
     grunt.loadNpmTasks('grunt-karma');
 
     // register tasks
     grunt.registerTask('assets:js', ['requirejs:dev']);
     grunt.registerTask('assets:css', ['compass:dev']);
     grunt.registerTask('test', ['karma']);
-    grunt.registerTask('build', ['requirejs:prod', 'ngAnnotate', 'uglify']);
+    grunt.registerTask('build', ['requirejs:prod', 'uglify', 'compass:prod', 'cssmin:combine', 'clean:build']);
 
     // register default task
     grunt.registerTask('default', ['concurrent:assets_all_dev', 'concurrent:connect_watch']);

diff --git a/README.md b/README.md
@@ -9,10 +9,42 @@ Check out the [online demo](http://ng-admin.marmelab.com/) and the [launch post]
 
 # Installation
 
-- Clone the repository.
-- Add a configuration file to describe your entities in `lib/config.js`.
-- Run the server with the `grunt` command.
-- See the result at [http://localhost:8000/](http://localhost:8000/).
+Retrieve the module from bower:
+
+```sh
+bower install ng-admin --save
+```
+
+Include it:
+
+```html
+<link rel="stylesheet" href=""/path/to/bower_components/ng-admin/build/ng-admin.min.css">
+
+<script src="/path/to/bower_components/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
+```
+
+Make your application depends on it:
+```js
+var app = angular.module('myApp', ['ng-admin']);
+```
+
+Configure ng-admin:
+```js
+app.config(function(NgAdminConfigurationProvider, Application, Entity, Field, Reference, ReferencedList, ReferenceMany) {
+    // See below for more information about the configuration
+
+    var app = Application('My backend')
+        .baseApiUrl('http://localhost:3000/')
+        .addEntity(/* ... */)
+
+    NgAdminConfigurationProvider.configure(app);
+}
+```
+
+Your application should use a `ui-view`:
+```html
+<div ui-view></div>
+```
 
 # Configuration
 
@@ -23,14 +55,7 @@ Here is a full example for a backend that will allows you to create, update, del
 Those posts can be tagged (`tags` entity) and commented (`comments` entity).
 
 ```js
-define([
-    'lib/config/Application',
-    'lib/config/Entity',
-    'lib/config/Field',
-    'lib/config/ReferencedList',
-    'lib/config/ReferenceMany'
-], function (Application, Entity, Field, ReferencedList, ReferenceMany) {
-    "use strict";
+app.config(function(NgAdminConfigurationProvider, Application, Entity, Field, Reference, ReferencedList, ReferenceMany) {
 
     var postBody, postId, postCreatedAt;
 
@@ -42,12 +67,13 @@ define([
         // define your specific pagination function returning GET parameters
         .pagination(function(page, maxPerPage) {
             return {
-                _start: (page - 1) * maxPerPage,
-                _end: (page) * maxPerPage
-            };
+                offset: (page - 1) * maxPerPage,
+                limit: maxPerPage
+            }
         })
         // enable lazyload pagination
         .infinitePagination(true)
+        // Set specific parameter for search
         .filterQuery(function(query) {
             return {
                 filter: query
@@ -131,22 +157,31 @@ define([
             .targetLabel('name')
         );
 
-    return Application('My backend')
+    var app = Application('My backend')
+        // Add extra headers for each actions
+        .headers(function(entityName, action) {
+            return {
+                'X-User': entityName === 'post' ? 'username' : 'user2',
+                'X-Password': 'pwd'
+            }
+        }
         .baseApiUrl('http://localhost:3000/')
         .addEntity(post)
         .addEntity(comment)
         .addEntity(tag);
+
+    NgAdminConfigurationProvider.configure(app);
 });
 ```
 
-## List of field types
+## Field types
 
 - `Field` : simple field
 - `Reference` : association 1-N with another entity
 - `ReferenceList` : association N-1
 - `ReferenceMany` : association N-N
 
-## List of options for `Field` type
+### List of options for `Field` type
 
 * `type(string ['number'|'text'|'email'|'date'])`
 Define the field type.
@@ -187,7 +222,7 @@ Number of elements displayed in dashboard.
 Define a custom validation function.
 
 
-## List of options for `Reference` type
+### List of options for `Reference` type
 
 The `Reference` type also defines `label`, `order`, `valueTransformer`, `list` & `validation` options like the `Field` type.
 
@@ -197,7 +232,7 @@ Define the referenced entity.
 * `targetLabel(string)`
 Define the target field name used to retrieve the label of the referenced element.
 
-## List of options for `ReferencedList` type
+### List of options for `ReferencedList` type
 
 The `ReferencedList` type also defines `label`, `order`, `valueTransformer`, `list` & `validation` options like the `Field` type.
 
@@ -210,7 +245,7 @@ Define the field name used to link the referenced entity.
 * `targetFields(Array(Field))`
 Define an array of fields that will be display in the list of the form.
 
-## List of options for `ReferencedMany` type
+### List of options for `ReferencedMany` type
 
 The `ReferencedMany` type also defines `label`, `order`, `valueTransformer`, `list` & `validation` options like the `Field` type.
 
@@ -223,6 +258,23 @@ Define the field name used to link the referenced entity.
 * `targetLabel(string)`
 Define the target field name used to retrieve the label of the referenced element.
 
+## Build
+
+Concatenate and minify the app with :
+```sh
+grunt build
+```
+
+## Tests
+
+Tests are lunched with karma by grunt:
+
+```
+grunt test
+```
+
+A new `build/ng-admin.min.js` file will be created.
+
 ## Contributing
 
 Your feedback about the usage of ng-admin in your specific context is valuable, don't hesitate to [open GitHub Issues](https://github.com/marmelab/ng-admin/issues) for any problem or question you may have.

diff --git a/build/ng-admin.min.css b/build/ng-admin.min.css
diff --git a/build/ng-admin.min.js b/build/ng-admin.min.js
diff --git a/grunt/grunt-compass.json b/grunt/grunt-compass.json
@@ -1,19 +1,19 @@
 {
     "dev": {
         "options": {
-            "cssDir": "src/css",
-            "imagesDir": "src/images",
+            "cssDir": "build",
+            "sassDir": "src/sass",
             "environment": "development",
-            "specify": ["sass/screen.scss"]
+            "relativeAssets": true,
+            "specify": ["src/sass/ng-admin.scss"]
         }
     },
     "prod": {
         "options": {
-            "sassDir": "sass",
-            "cssDir": "src/css",
-            "imagesDir": "src/images",
+            "cssDir": "build",
+            "sassDir": "src/sass",
             "environment": "production",
-            "specify": ["sass/screen.scss"],
+            "specify": ["src/sass/ng-admin.scss"],
             "outputStyle": "compressed"
         }
     }

diff --git a/grunt/grunt-requirejs.json b/grunt/grunt-requirejs.json
@@ -1,35 +1,33 @@
 {
     "dev": {
         "options": {
-            "appDir": "src/scripts",
-            "fileExclusionRegExp": "^(build)",
+            "appDir": "src/javascripts",
             "baseUrl": "./",
-            "dir": "src/require",
+            "mainConfigFile": "src/javascripts/ng-admin.js",
+            "dir": "build/require",
             "optimize": "none",
             "preserveLicenseComments": false,
             "generateSourceMaps": true,
             "skipDirOptimize": true,
-            "removeCombined": true,
-            "mainConfigFile": "src/scripts/app.js"
+            "removeCombined": true
         }
     },
     "prod": {
         "options": {
-            "baseUrl": "src/scripts",
-            "mainConfigFile": "src/scripts/app.js",
-            "include": ["app"],
+            "baseUrl": "src/javascripts",
+            "mainConfigFile": "src/javascripts/ng-admin.js",
+            "include": ["ng-admin"],
             "name": "bower_components/almond/almond",
-            "out": "./src/build/ng-admin.min.js",
-
+            "out": "./build/ng-admin.min.js",
             "optimize": "none",
             "preserveLicenseComments": false,
             "findNestedDependencies": true,
             "generateSourceMaps": false,
             "skipDirOptimize": true,
             "removeCombined": true,
             "wrap": {
-                "startFile": "build/start.frag",
-                "endFile": "build/end.frag"
+                "startFile": "src/build/start.frag",
+                "endFile": "src/build/end.frag"
             }
         }
     }

diff --git a/src/index.html → index.html b/src/index.html → index.html
@@ -5,10 +5,10 @@
         <title>Angular admin</title>
         <meta name="viewport" content="width=device-width">
 
-        <link rel="stylesheet" href="css/screen.css">
+        <link rel="stylesheet" href="build/ng-admin.min.css">
 
         <script src="build/ng-admin.min.js" type="text/javascript"></script>
-        <script src="scripts/config.js" type="text/javascript"></script>
+        <script src="src/javascripts/config.js" type="text/javascript"></script>
     </head>
     <body ng-app="myApp">
         <div ui-view></div>