bower annotation block should be wrapped by build block. for example <div class="s

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

vendor.js has been created successfully. see log below: <div class="snippet-clipbo

Missing build annotation block for scripts installed via bower about generator-chromeapp HOT 9 CLOSED

ragingwind commented on July 24, 2024

Missing build annotation block for scripts installed via bower

from generator-chromeapp.

Comments (9)

davidmaxwaterman commented on July 24, 2024

I tried adding the above manually but it didn't seem to have any effect. I guess I'm doing something wrong, but perhaps you could elaborate?

from generator-chromeapp.

ragingwind commented on July 24, 2024

Could you post your build message?

On Tue, Jul 22, 2014 at 5:19 AM, Max Waterman [email protected]
wrote:

I tried adding the above manually but it didn't seem to have any effect. I
guess I'm doing something wrong, but perhaps you could elaborate?

—
Reply to this email directly or view it on GitHub
#33 (comment)
.

from generator-chromeapp.

davidmaxwaterman commented on July 24, 2024

$ grunt build
Running "clean:dist" (clean) task
Cleaning .tmp...OK
Cleaning dist/_locales...OK
Cleaning dist/bower_components...OK
Cleaning dist/images...OK
Cleaning dist/index.html...OK
Cleaning dist/manifest.json...OK
Cleaning dist/scripts...OK
Cleaning dist/styles...OK

Running "chromeManifest:dist" (chromeManifest) task
Build number has changed to 12

Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks

Configuration is now:

  concat:
  { dist: {},
  background: 
   { src: 
      [ 'app/scripts/main.js',
        'app/scripts/kindle.js' ],
     dest: 'dist/scripts/background.js' },
  generated: 
   { files: 
      [ { dest: '.tmp/concat/styles/main.css',
          src: [ 'app/styles/main.css' ] },
        { dest: '.tmp/concat/scripts/vendor.js',
          src: [ 'app/bower_components/jquery/dist/jquery.js' ] },
        { dest: '.tmp/concat/scripts/index.js',
          src: [ 'app/scripts/index.js' ] } ] } }

  uglify:
  { 'dist/scripts/background.js': 'dist/scripts/background.js',
  generated: 
   { files: 
      [ { dest: 'dist/scripts/vendor.js',
          src: [ '.tmp/concat/scripts/vendor.js' ] },
        { dest: 'dist/scripts/index.js',
          src: [ '.tmp/concat/scripts/index.js' ] } ] } }

  cssmin:
  { generated: 
   { files: 
      [ { dest: 'dist/styles/main.css',
          src: [ '.tmp/concat/styles/main.css' ] } ] } }

Running "concurrent:dist" (concurrent) task

    Running "imagemin:dist" (imagemin) task
    ✔ app/images/icon-16.png (already optimized)
    ✔ app/images/icon-128.png (already optimized)
    Minified 2 images (saved 0 B)

    Done, without errors.


    Execution Time (2014-07-22 10:07:02 UTC)
    loading tasks    5ms  ▇ 2%
    imagemin:dist  313ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 98%
    Total 319ms

    Running "svgmin:dist" (svgmin) task
    Total saved: 0 B

    Done, without errors.


    Execution Time (2014-07-22 10:07:02 UTC)
    loading tasks   4ms  ▇▇▇▇ 8%
    svgmin:dist    47ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 92%
    Total 51ms

    Running "copy:styles" (copy) task
    Copied 1 files

    Done, without errors.


    Execution Time (2014-07-22 10:07:02 UTC)
    loading tasks   3ms  ▇▇▇▇▇▇▇▇ 17%
    copy:styles    14ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 78%
    Total 18ms

Running "concat:dist" (concat) task

Running "concat:background" (concat) task
File "dist/scripts/background.js" created.

Running "concat:generated" (concat) task
File ".tmp/concat/styles/main.css" created.
File ".tmp/concat/scripts/vendor.js" created.
File ".tmp/concat/scripts/index.js" created.

Running "cssmin:generated" (cssmin) task
File dist/styles/main.css created: 28 B → 18 B

Running "uglify:dist/scripts/background.js" (uglify) task
File dist/scripts/background.js created: 3.39 kB → 1.52 kB

Running "uglify:generated" (uglify) task
File dist/scripts/vendor.js created: 247.35 kB → 84.11 kB
File dist/scripts/index.js created: 996 B → 681 B

Running "copy:dist" (copy) task
Created 2 directories, copied 10 files

Running "copy:styles" (copy) task
Copied 1 files

Running "usemin:html" (usemin) task

Processing as HTML - dist/index.html
Update the HTML to reference our concat/min/revved script files
Update the HTML with the new css filenames
Update the HTML with the new img filenames
Update the HTML with data-main tags
Update the HTML with data-* tags
Update the HTML with background imgs, case there is some inline style
Update the HTML with anchors images
Update the HTML with reference in input

Running "usemin:css" (usemin) task

Processing as CSS - dist/styles/main.css
Update the CSS to reference our revved images

Running "htmlmin:dist" (htmlmin) task
Minified dist/index.html 738 B → 483 B

Running "compress:dist" (compress) task
Created package/kindle_in_webview-12.zip (171523 bytes)

Done, without errors.


Execution Time (2014-07-22 10:07:00 UTC)
concurrent:dist                    2.1s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 56%
uglify:dist/scripts/background.js  59ms  ▇▇▇ 2%
uglify:generated                   1.4s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 37%
compress:dist                      96ms  ▇▇▇▇ 3%
Total 3.8s

Changes I've made to Gruntfile.js - I suspect they're relevant (though I had a go with it put back)[0] :

--- a/maxw/kindle_in_webview/Gruntfile.js
+++ b/maxw/kindle_in_webview/Gruntfile.js
@@ -220,28 +220,13 @@ module.exports = function (grunt) {
         // By default, your `index.html`'s <!-- Usemin block --> will take care of
         // minification. These next options are pre-configured if you do not wish
         // to use the Usemin blocks.
-        // cssmin: {
-        //     dist: {
-        //         files: {
-        //             '<%= config.dist %>/styles/main.css': [
-        //                 '.tmp/styles/{,*/}*.css',
-        //                 '<%= config.app %>/styles/{,*/}*.css'
-        //             ]
-        //         }
-        //     }
-        // },
-        // uglify: {
-        //     dist: {
-        //         files: {
-        //             '<%= config.dist %>/scripts/scripts.js': [
-        //                 '<%= config.dist %>/scripts/scripts.js'
-        //             ]
-        //         }
-        //     }
-        // },
-        // concat: {
-        //     dist: {}
-        // },
+        cssmin: {
+        },
+        uglify: {
+        },
+        concat: {
+            dist: {}
+        },

         // Copies remaining files to places other tasks can use
         copy: {
@@ -257,6 +242,9 @@ module.exports = function (grunt) {
                         '{,*/}*.html',
                         'styles/fonts/{,*/}*.*',
                         '_locales/{,*/}*.json',
+                        'bower_components/*/dist/*.js',
+                        'styles/**',
+                        'scripts/**',
                     ]
                 }]
             },
@@ -326,13 +314,11 @@ module.exports = function (grunt) {
     grunt.registerTask('debug', function (platform) {
         var watch = grunt.config('watch');
         platform = platform || 'chrome';
-        

         // Configure style task for debug:server task
         if (platform === 'server') {
             watch.styles.tasks = ['newer:copy:styles'];
             watch.styles.options.livereload = false;
-            
         }

         // Configure updated watch task

and index.html :

--- a/maxw/kindle_in_webview/app/index.html
+++ b/maxw/kindle_in_webview/app/index.html
@@ -12,10 +12,24 @@
         <!-- endbuild -->
     </head>
     <body>
-        <h1>'Allo</h1>
-         
+        <h1>snip</h1>
+        <webview
+          id="snip"
+          src="https://snip/" 
+          name="snip" 
+          style="
+            width:640px;
+            height:480px;
+            border: 1px solid red;" 
+          autosize="on" 
+          minwidth="576" 
+          minheight="432">
+        </webview>
+        <!-- build:js scripts/vendor.js -->
         <!-- bower:js -->
+        <script src="bower_components/jquery/dist/jquery.js"></script>
         <!-- endbower -->
+        <!-- endbuild -->

         <!-- build:js scripts/index.js -->
         <script src="scripts/index.js"></script>

HTH

Max.

[1] BTW, my objective with the changes to Gruntfile.js was to stop it minifying/uglifying for debugging. I've worked a long time with grunt, though probably not in any 'advanced' way, and oft wonder why it is so difficult to turn off these clever features. Yes, they're great for packaging the 'final' version, but most of the time is spent debugging/developing, so we want to see unmangled stuff. Is this 'the way'? Previous attempts involved getting uglify to beautify the code, but I'd prefer it if they just had an 'off' option.

from generator-chromeapp.

ragingwind commented on July 24, 2024

vendor.js has been created successfully. see log below:

Running "uglify:generated" (uglify) task
File dist/scripts/vendor.js created: 247.35 kB → 84.11 kB
File dist/scripts/index.js created: 996 B → 681 B

Please check the dist/scripts/vendor.js file

And You can disable specific task or make own task. All of grunt task options can be configurable. Please refer to guide for Grunt.

from generator-chromeapp.

davidmaxwaterman commented on July 24, 2024

OK, I see vendor.js. I guess I've not quite been following what is happening - is this explained anywhere?

I also see a script line for vendor.js in my dist/index.html file.

Unfortunately, I want to use that in other files too (eg in my content script) and was expecting it to be in a dist/bower_components/ directory...like I say, these grunt tasks change everything and the user needs to learn what is happening (I've written my own grunt tasks for building for crosswalk on android, so I'm not completely ignorant of grunt internals). It would be nice if there were some explanation of what it does. Grunt itself is generic and the tasks are configurable but don't seem to have an 'off' option. I suppose the 'map' files might be able to help here (ie don't need to turn them off and can still read the original source), but it's all way too complicated for its own good, imo. I was hoping you could put me on the right path somehow, but it seems not...

from generator-chromeapp.

ragingwind commented on July 24, 2024

Origin problem is the generator doesn't do build-process, like concat, uglify and minify. It seems to be works.

I'm not mean, you're newbie for Grunt. There is no way to explain how to use / works all of grunt task that Yeoman generator are using. If users would like to has own changes for something? Should take look a grunt task for more information.

In this case, You need to understand the task below. The generator has two way to manage script files. one is scripts files in manifest.json, another is scripts files in usemin block. to conclude, content scripts can't put in usemin block. chrome-manifest task will be manged automatically.

https://github.com/ragingwind/grunt-chrome-manifest: add javascript/css files(like a background.js or content_script) in manifest.json to concat, uglify and minify task for usemin task
https://github.com/yeoman/grunt-usemin: If you're not familiar with usemin block you can use concat/ugligy/minify task manually. see more info https://github.com/yeoman/generator-chrome-extension/blob/master/app/templates/Gruntfile.js#L286

The generator list-up scripts in manifest.json via grunt-chrome-manifest task to prepare usemin task with no effort of user to Gruntfile.js. and usemin task do own task. So If you want to have changed path what you want it? Unfortunately, You can't use tasks relative with usemin task. If you don't wish to use usemin (with grunt-chrome-manifest)? delete these tasks, chromeManifest:dist, useminPrepare, usemin in build task in Gruntfile.js.

I hope that this is help for you. I'll update more information about build workflow

from generator-chromeapp.

davidmaxwaterman commented on July 24, 2024

I've been working with grunt for a few years now, so, no, I'm not a newbie to grunt. I am a newbie to Yeoman, and to this generator in particular (and to configuring the specific tasks). Also, IINM, the audience for these generators is the newbie - someone who wants the app set up for them; a good place to start.
So, if you consider me a newbie, then fine, perhaps what I am saying is of some use. I'm not wanting you to explain all the tasks being used - well. not in any detail - but it'd be nice to see what the flow is; ie the relationship between the files the user creates and what ends up in the build directory. A quick diagram would do it, I'd've thought. Grunt is extremely flexible and there are many different tasks, so explaining how you're using them is very useful.
I noticed the debug task, but when I try that, I get an error because chrome.runtime doesn't have 'onMessage'...presumably because this is running as a webapp, not a packaged app. I'm wondering what the point of this debug task it for packaged apps. I'd prefer it if it just did the same as 'build' but didn't mangle anything so the chrome inspector accurately reflected what was in the source files. Of course, there's this source mapping thing now, so perhaps that's the way to go...

from generator-chromeapp.

ragingwind commented on July 24, 2024

Thanks for your suggestion. We'll update for that.

for debug task. debug or debug:sever task supports live-reload task(preview mode) for developing chromeapps. in developing with debug task. You can have charomeapp with newset changed files. see https://github.com/yeoman/generator-chromeapp#debug , If you need more information about preview mode please refer to http://yeoman.io/codelab/preview-inbrowser.html

I'm not sure this is what you want it. You don't need to build task for developing chromeapps. You just load to app directory for chromeapps developing. It wont mangle any files.

Please make another issue if you've got a problem or Using StackOverFlow for question. I don't want to discuss for different issue at here this issue for annotation block

from generator-chromeapp.

davidmaxwaterman commented on July 24, 2024

OK, that makes some sense then. I'm used to the grunt build process actually substituting stuff in the process, so loading the app direct from the app directory won't work (properly) - I view it more akin to compiling, in that you wouldn't expect to be able to run C source code without compiling. My other apps had multiple targets, so it made more sense this way.
I like the concept of the live-reload though, and this project is only targeting chromeos, so I'll see what I can make of it - I have my doubts, but it does promise to restore the joy of being able to develop without a build step.
OK, I'll go to StackOverflow for more.
Regards.

from generator-chromeapp.

Missing build annotation block for scripts installed via bower about generator-chromeapp HOT 9 CLOSED

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent