Comments (9)
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.
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.
$ 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.
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.
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.
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.
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.
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.
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.
Related Issues (20)
- Grunt (bowerInstall) fails to download bower components HOT 3
- grunt test fails due to not downloaded bower components in test folder HOT 3
- debug target doesn't update page on chromeos+crouton HOT 4
- Grunt does not launch app in Chrome App container HOT 1
- Change workflow for Polymer HOT 4
- Failed to load resource: net::ERR_FILE_NOT_FOUND background.js HOT 2
- cannot found a 'manifest.json' in chrome-apps-samples
- Remove unless postfix 'dev'
- Change intent 4 to 2
- Port conflict problems with grunt connect HOT 4
- chromeapp:samples "Client ID is below specific application key" HOT 4
- Filter google-chrome samples
- investigate errors on testing Travis CI HOT 5
- Applying Polymer, gulp and cca HOT 7
- Cannot find module '../manifest' HOT 1
- Drop CoffeeScript in favor of ES6 (Babel) HOT 5
- Using PSK as default application HOT 9
- `grunt debug` doesn't update output files HOT 3
- npm error: [email protected] requires a peer of generator-mocha@>=0.1.6 but none was installed HOT 5
- NPM issue with installing the generator HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from generator-chromeapp.