Except, he understands how this crap actually works and wrote the thing in plain sass. (not the extjs theme extension thing). So, I can't really add it to the framework generated by
sencha generate app
So, I don't. Now I need to figure out how to automatically copy his css over when I do
sencha app build
and figure out how to get rid of the stupid ruby compass compilation thingy that takes forever anyways.
I also want to not use YUI to compress, but rather uglifyjs2. This can be put into a grunt task.
Here's how you get rid of the sass build and slicing.
Go to
.sencha/app/sencha.cfg
and add the lines
skip.sass=1
skip.slice=1
Finally got rid of that crap.
Now, we want to stop using YUI.
Go to
.sencha/app/build.properties
and set the following lines.
build.compression.yui=0
build.compression.closure=1
build.compression.uglify=0
When I tried to use Uglify, I got the following error:
[ERR]
[ERR] BUILD FAILED
[ERR] java.lang.UnsupportedOperationException: Not Yet Implemented
[ERR]
[ERR] Total time: 10 seconds
Laughable.Since closure takes forever, the best option is probably just to not use compression, and just use a grunt task to build after everything is concatenated. That includes uglifying the concatenated app.js file, copying the bootstrap theme to the build folder, and gzipping both of those files.
Here's the gruntfile config:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
shell: {
sencha_app_build: {
command: 'sencha app build'
}
},
jshint: {
options: {
reporter: require('jshint-stylish')
},
main: ['Gruntfile.js', 'app/**/*.js']
},
uglify: {
options: {
banner: '/*\n Copyright <%= pkg.author %> \n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
main: {
files: {
'build/production/<%= pkg.name %>/app.js': 'build/production/<%= pkg.name %>/app.js'
}
}
},
copy: {
main: {
src: 'resources/css/bootstrap.css',
dest: 'build/production/<%= pkg.name %>/resources/'
}
},
compress: {
options: {
mode: 'gzip'
},
js: {
expand: true, //use whole filename
src: ['build/production/<%= pkg.name %>/*.js'],
dest: '.'
},
css: {
expand: true,
src: ['build/production/<%= pkg.name %>/resources/*.css'],
dest: '.'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-shell'); //or grunt-exec, unsure which is better
grunt.registerTask('default', ['shell', 'uglify', 'copy', 'compress']);
};
- your package name in package.json is the same as your Sencha project name
- bootstrap.css is under resources/css
- you have all the dependencies in npm and run npm install!
