Extension and website working together.

Author: sebadoom

Gruntfile.js

@@ -1,6 +1,3 @@
-const websiteWebpackConfigDev = require('./webpack.website-dev.js');
-const websiteWebpackConfigProd = require('./webpack.website-prod.js');
-
 module.exports = grunt => {
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-stylus');
@@ -10,12 +7,21 @@ module.exports = grunt => {
   grunt.loadNpmTasks('grunt-contrib-clean');
 
   grunt.initConfig({
-    clean: [ 'dist' ],
+    clean: {
+      website: [ 'dist/website' ],
+      extension: ['dist/extension']
+    },
+
     copy: {
-      main: {
+      website: {
         files: [{
           expand: true,
-          src: ['img/**', 'fonts/**', 'assets/**', 'opensearch.xml'],
+          cwd: 'img/website',
+          src: ['**'],
+          dest: 'dist/website/img'
+        }, {
+          expand: true,
+          src: ['fonts/**', 'opensearch.xml'],
           dest: 'dist/website'
         }, {
           expand: true,
@@ -29,56 +35,168 @@ module.exports = grunt => {
           ],
           dest: 'dist/website/css/'
         }]
+      },
+      extension: {
+        files: [{
+          expand: true,
+          flatten: true,
+          src: ['manifest.json', 'html/extension/bg.html'],
+          dest: 'dist/extension'
+        }, {
+          expand: true,
+          cwd: 'img/extension',
+          src: ['**'],
+          dest: 'dist/extension/img'
+        }, {
+          expand: true,
+          src: ['fonts/**'],
+          dest: 'dist/extension'
+        }, {
+          expand: true,
+          flatten: true,
+          src: [
+            'node_modules/bootstrap/dist/css/bootstrap.min.css',
+            'node_modules/codemirror/lib/codemirror.css',
+            'node_modules/codemirror/addon/lint/lint.css',
+            'css/budicon.css',
+            'css/google-roboto-mono.css'
+          ],
+          dest: 'dist/extension/css/'
+        }]
       }
     }, 
+
     stylus: {
-      compile: {
+      website: {
+        files: {
+          'dist/website/css/index.css': 'stylus/website/index.styl'
+        }
+      },
+      extension: {
         files: {
-          'dist/website/css/app.css': 'stylus/app.styl'
+          'dist/extension/css/index.css': 'stylus/extension/index.styl'
         }
       }
     },
+
     pug: {
-      compile: {
+      website: {
         files: {
           'dist/website/index.html': 'views/website/index.pug',
           'dist/website/introduction/index.html': 
             'views/website/introduction.pug'
         }
+      },
+      extension: {
+        files: {
+          'dist/extension/index.html': 'views/extension/index.pug'          
+        }
       }
     },
+
     webpack: {
-      prod: websiteWebpackConfigProd,
-      dev: websiteWebpackConfigDev
+      websiteProd: require('./webpack.website-prod.js'),
+      websiteDev: require('./webpack.website-dev.js'),
+      extensionProd: require('./webpack.extension-prod.js'),
+      extensionDev: require('./webpack.extension-dev.js'),
     },
+
     watch: {
-      js: {
-        files: 'src/**',
-        tasks: 'webpack:dev'
+      websiteSrc: {
+        files: ['src/*.js', 'src/website/**'],
+        tasks: 'webpack:websiteDev'
+      },
+      extensionSrc: {
+        files: ['src/*.js', 'src/extension/**'],
+        tasks: 'webpack:extensionDev'
+      },
+      websiteImg: {
+        files: [ 'img/website/**' ],
+        tasks: 'copy:website'
+      },
+      extensionImg: {
+        files: [ 'img/extension/**' ],
+        tasks: 'copy:extension'
+      },
+      opensearch: {
+        files: 'opensearch.xml',
+        tasks: 'copy:website'
       },
       assets: {
         files: [
-          'img/**',
           'fonts/**',
-          'assets/**',
-          'opensearch.xml',
           'node_modules/bootstrap/dist/css/bootstrap.min.css',
           'node_modules/codemirror/lib/codemirror.css',
           'node_modules/codemirror/addon/lint/lint.css',
           'css/budicon.css'
         ],
         tasks: 'copy'
       },
-      views: {
-        files: ['stylus/**', 'views/**'],
-        tasks: ['build-views']
+      websiteViews: {
+        files: [
+          'stylus/*.styl',
+          'stylus/website/**',
+          'views/*.pug',
+          'views/website/**'
+        ],
+        tasks: ['build-website-views']
+      },
+      extensionViews: {
+        files: [
+          'stylus/*.styl',
+          'stylus/extension/**',
+          'views/*.pug',
+          'views/extension/**'
+        ],
+        tasks: ['build-extension-views']
       }
     }
   });
 
-  grunt.registerTask('build-views', ['stylus', 'pug']);
-  grunt.registerTask('build', ['clean', 'copy', 'build-views', 'webpack:prod']);
-  grunt.registerTask('build-dev', 
-                     ['clean', 'copy', 'build-views', 'webpack:dev']);
+  grunt.registerTask('build-website-views', [
+    'stylus:website',
+    'pug:website'
+  ]);
+
+  grunt.registerTask('build-extension-views', [
+    'stylus:extension',
+    'pug:extension'
+  ]);
+
+  grunt.registerTask('build-website', [
+    'clean:website',
+    'copy:website',
+    'build-website-views',
+    'webpack:websiteProd'
+  ]);
+
+  grunt.registerTask('build-website-dev', [
+    'clean:website',
+    'copy:website',
+    'build-website-views',
+    'webpack:websiteDev'
+  ]);
+
+  grunt.registerTask('build-extension', [
+    'clean:extension',
+    'copy:extension',
+    'build-extension-views',
+    'webpack:extensionProd'
+  ]);
+  
+  grunt.registerTask('build-extension-dev', [
+    'clean:extension',
+    'copy:extension', 
+    'build-extension-views',
+    'webpack:extensionDev'
+  ]);
+  
+  grunt.registerTask('build', ['build-website', 'build-extension']);
+  
+  grunt.registerTask('build-dev', [
+    'build-website-dev',
+    'build-extension-dev'
+  ]);
+  
   grunt.registerTask('default', ['build-dev', 'watch']);
 };

html/extension/bg.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+</html>