Comments (4)
@dneukirchen let's sync here!
For Joomla 4 I have created a grunt script that takes care of all the external scripts and other processes as scss to css for templates. I guess we can merge things here!
Here is the gruntgile.js of J4:
module.exports = function(grunt) {
var settings = grunt.file.readYAML('grunt_settings.yaml'),
path = require('path'),
preText = '{\n "name": "joomla-assets",\n "version": "4.0.0",\n "description": "External assets that Joomla is using",\n "dependencies": {\n ',
postText = ' },\n "license": "GPL-2.0+"\n}',
name, tinyXml, codemirrorXml,
vendorsTxt = '',
vendorsArr = '',
xmlVersionStr = /(<version>)(\d+.\d+.\d+)(<\/version>)/;
// Loop to get some text for the packgage.json
for (name in settings.vendors) {
vendorsTxt += '"' + name + '": "' + settings.vendors[name].version + '",';
}
// Loop to get some text for the assets.php
for (name in settings.vendors) {
vendorsArr += '\'' + name + '\' => array(\'version\' => \'' + settings.vendors[name].version + '\',' + '\'dependencies\' => \'' + settings.vendors[name].dependencies + '\'),\n\t\t\t';
}
// Build the package.json and assets.php for all 3rd Party assets
grunt.file.write('build/assets_tmp/package.json', preText + vendorsTxt.substring(0, vendorsTxt.length - 1) + postText);
// grunt.file.write('build/assets_tmp.php', '<?php\ndefined(\'_JEXEC\') or die;\n\nabstract class ExternalAssets{\n\tpublic static function getCoreAssets() {\n\t\t return array(\n\t\t\t' + vendorsArr + '\n\t\t);\n\t}\n}\n');
// Project configuration.
grunt.initConfig({
folder : {
system : 'media/system/js',
fields : 'media/system/js/fields',
legacy : 'media/system/js/legacy',
puny : 'media/vendor/punycode/js',
codemirror : 'media/vendor/codemirror',
adminTemplate : 'administrator/templates/atum',
node_module : 'build/assets_tmp/node_modules/'
},
// Let's clean up the system
clean: {
assets: {
src: [
'media/vendor/jquery/js/*',
'media/vendor/bootstrap/**',
'media/vendor/tether/**',
'media/vendor/jcrop/**',
'media/vendor/dragula/**',
'media/vendor/font-awesome/**',
'media/vendor/tinymce/plugins/*',
'media/vendor/tinymce/skins/*',
'media/vendor/tinymce/themes/*',
'media/vendor/punycode/*',
'media/vendor/codemirror/*',
'media/vendor/mediaelement/*',
'media/vendor/chosenjs/*',
'media/vendor/awesomplete/*',
],
expand: true,
options: {
force: true
}
},
temp: { src: [ 'build/assets_tmp/*', 'build/assets_tmp/tmp', 'build/assets_tmp/package.json' ], expand: true, options: { force: true } }
},
// Update all the packages to the version specified in assets/package.json
shell: {
update: {
command: [
'cd build/assets_tmp',
'npm install'
].join('&&')
}
},
// Concatenate some javascript files
concat: {
someFiles: {
files: [
{
src: settings.CmAddons.js.map(function (v) {
return '<%= folder.node_module %>codemirror/' + v;
}),
dest: '<%= folder.node_module %>codemirror/lib/addons.js'
},
{
src: settings.CmAddons.css.map(function (v) {
return '<%= folder.node_module %>codemirror/' + v;
}),
dest: '<%= folder.node_module %>codemirror/lib/addons.css'
}
]
}
},
// Transfer all the assets to media/vendor
copy: {
fromSource: {
files: [
// jQuery js files
{ expand: true, cwd: '<%= folder.node_module %>jquery/dist/', src: ['*', '!(core.js)'], dest: 'media/vendor/jquery/js/', filter: 'isFile'},
// jQuery js migrate files
{ expand: true, cwd: '<%= folder.node_module %>jquery-migrate/dist/', src: ['**'], dest: 'media/vendor/jquery/js/', filter: 'isFile'},
//Bootastrap js files
{ expand: true, cwd: '<%= folder.node_module %>bootstrap/dist/js/', src: ['**'], dest: 'media/vendor/bootstrap/js/', filter: 'isFile'},
//Bootastrap scss files
{ expand: true, cwd: '<%= folder.node_module %>bootstrap/scss/', src: ['**'], dest: 'media/vendor/bootstrap/scss/', filter: 'isFile'},
//Bootastrap css files
{ expand: true, cwd: '<%= folder.node_module %>bootstrap/dist/css/', src: ['**'], dest: 'media/vendor/bootstrap/css/', filter: 'isFile'},
//Teether js files
{ expand: true, cwd: '<%= folder.node_module %>tether/dist/js/', src: ['**'], dest: 'media/vendor/tether/js/', filter: 'isFile'},
// Punycode js files
{ expand: true, cwd: '<%= folder.node_module %>punycode/', src: ['punycode.js', 'LICENSE-MIT.txt'], dest: 'media/vendor/punycode/js/', filter: 'isFile'},
// Cropperjs css files
{ expand: true, cwd: '<%= folder.node_module %>cropperjs/dist', src: ['*.css'], dest: 'media/vendor/cropperjs/css/', filter: 'isFile'},
// Cropperjs js files
{ expand: true, cwd: '<%= folder.node_module %>cropperjs/dist', src: ['*.js'], dest: 'media/vendor/cropperjs/js/', filter: 'isFile'},
//Font Awesome css files
{ expand: true, cwd: '<%= folder.node_module %>font-awesome/css/', src: ['**'], dest: 'media/vendor/font-awesome/css/', filter: 'isFile'},
//Font Awesome scss files
{ expand: true, cwd: '<%= folder.node_module %>font-awesome/scss/', src: ['**'], dest: 'media/vendor/font-awesome/scss/', filter: 'isFile'},
//Font Awesome fonts files
{ expand: true, cwd: '<%= folder.node_module %>font-awesome/fonts/', src: ['**'], dest: 'media/vendor/font-awesome/fonts/', filter: 'isFile'},
// tinyMCE plugins
{ expand: true, cwd: '<%= folder.node_module %>tinymce/plugins/', src: ['**'], dest: 'media/vendor/tinymce/plugins/', filter: 'isFile'},
// tinyMCE skins
{ expand: true, cwd: '<%= folder.node_module %>tinymce/skins/', src: ['**'], dest: 'media/vendor/tinymce/skins/', filter: 'isFile'},
// tinyMCE themes
{ expand: true, cwd: '<%= folder.node_module %>tinymce/themes/', src: ['**'], dest: 'media/vendor/tinymce/themes/', filter: 'isFile'},
// tinyMCE js files
{ expand: true, cwd: '<%= folder.node_module %>tinymce/', src: ['tinymce.js','tinymce.min.js','license.txt','changelog.txt'], dest: 'media/vendor/tinymce/', filter: 'isFile'},
// Code mirror addon files
{ expand: true, cwd: '<%= folder.node_module %>codemirror/addon/', src: ['**'], dest: 'media/vendor/codemirror/addon/', filter: 'isFile'},
// Code mirror keymap files
{ expand: true, cwd: '<%= folder.node_module %>codemirror/keymap/', src: ['**'], dest: 'media/vendor/codemirror/keymap/', filter: 'isFile'},
// Code mirror lib files
{ expand: true, cwd: '<%= folder.node_module %>codemirror/lib', src: ['**'], dest: 'media/vendor/codemirror/lib/', filter: 'isFile'},
// Code mirror mode files
{ expand: true, cwd: '<%= folder.node_module %>codemirror/mode', src: ['**'], dest: 'media/vendor/codemirror/mode/', filter: 'isFile'},
// Code mirror theme files
{ expand: true, cwd: '<%= folder.node_module %>codemirror/theme', src: ['**'], dest: 'media/vendor/codemirror/theme/', filter: 'isFile'},
// Media Element js, swf, xap files
{ expand: true, cwd: '<%= folder.node_module %>mediaelement/build', src: ['*.js', '*.swf', '*.xap', '!jquery.js'], dest: 'media/vendor/mediaelement/js/', filter: 'isFile'},
// Media Element css, png, gif, svg files
{ expand: true, cwd: '<%= folder.node_module %>mediaelement/build', src: ['*.css', '*.png', '*.svg', '*.gif'], dest: 'media/vendor/mediaelement/css/', filter: 'isFile'},
// MiniColors js files
{ expand: true, cwd: '<%= folder.node_module %>jquery-minicolors', src: ['*.js'], dest: 'media/vendor/minicolors/js/', filter: 'isFile'},
// MiniColors css, ong files
{ expand: true, cwd: '<%= folder.node_module %>jquery-minicolors', src: ['*.css', '*.png'], dest: 'media/vendor/minicolors/css/', filter: 'isFile'},
// Awesomplete js files
{ expand: true, cwd: '<%= folder.node_module %>awesomplete', src: ['awesomplete.js', 'awesomplete.min.js'], dest: 'media/vendor/awesomplete/js/', filter: 'isFile'},
// Awesomplete css files
{ expand: true, cwd: '<%= folder.node_module %>awesomplete', src: ['awesomplete.css'], dest: 'media/vendor/awesomplete/css/'},
// Dragula js files
{ expand: true, cwd: '<%= folder.node_module %>dragula/dist', src: ['*.js'], dest: 'media/vendor/dragula/js/', filter: 'isFile'},
// Dragula css files
{ cwd: '<%= folder.node_module %>dragula/dist', src: ['*.css'], dest: 'media/vendor/dragula/css/', expand: true, filter: 'isFile'},
// Licenses
{ src: ['<%= folder.node_module %>jquery/LICENSE.txt'], dest: 'media/vendor/jquery/LICENSE.txt'},
{ src: ['<%= folder.node_module %>bootstrap/LICENSE'], dest: 'media/vendor/bootstrap/LICENSE'},
{ src: ['<%= folder.node_module %>tether/LICENSE'], dest: 'media/vendor/tether/LICENSE'},
{ src: ['<%= folder.node_module %>codemirror/LICENSE'], dest: 'media/vendor/codemirror/LICENSE'},
{ src: ['<%= folder.node_module %>jcrop/jcrop-MIT-LICENSE.txt'], dest: 'media/vendor/jcrop/jcrop-MIT-LICENSE.txt'},
{ src: ['<%= folder.node_module %>dragula/license'], dest: 'media/vendor/dragula/license'},
{ src: ['<%= folder.node_module %>awesomplete/LICENSE'], dest: 'media/vendor/awesomplete/LICENSE'},
]
}
},
// Compile Sass source files to CSS
sass: {
dist: {
options: {
precision: '5',
sourceMap: true // SHOULD BE FALSE FOR DIST
},
files: {
'<%= folder.adminTemplate %>/css/template.css': '<%= folder.adminTemplate %>/scss/template.scss'
}
}
},
// Validate the SCSS
scsslint: {
allFiles: [
'<%= folder.adminTemplate %>/scss',
],
options: {
config: 'scss-lint.yml',
reporterOutput: '<%= folder.adminTemplate %>/scss/scss-lint-report.xml'
}
},
// Minimize some javascript files
uglify: {
allJs: {
files: [
{
src: [
'<%= folder.system %>/*.js',
'!<%= folder.system %>/*.min.js',
'<%= folder.system %>/fields/*.js',
'!<%= folder.system %>/fields/*.min.js',
'<%= folder.system %>/legacy/*.js',
'!<%= folder.system %>/legacy/*.min.js',
'<%= folder.codemirror %>/addon/*/*.js',
'!<%= folder.codemirror %>/addon*/*.min.js',
'<%= folder.codemirror %>/keymap/*.js',
'!<%= folder.codemirror %>/keymap/*.min.js',
'<%= folder.codemirror %>/lib/*.js',
'!<%= folder.codemirror %>/lib/*.min.js',
'<%= folder.codemirror %>/mode/*/*.js',
'!<%= folder.codemirror %>/mode/*/*.min.js',
'<%= folder.codemirror %>/theme/*/*.js',
'!<%= folder.codemirror %>/theme/*/*.min.js',
// '<%= folder.puny %>/*.js', // Uglifying punicode.js fails!!!
// '!<%= folder.puny %>/*.min.js', // Uglifying punicode.js fails!!!
],
dest: '',
expand: true,
ext: '.min.js'
}
]
},
templates: {
files: [
{
src: [
'<%= folder.adminTemplate %>/*.js',
],
dest: '',
expand: true,
ext: '.min.js'
}
]
}
},
// Initiate task after CSS is generated
postcss: {
options: {
map: false,
processors: [
require('autoprefixer')({browsers: 'last 2 versions'})
],
},
dist: {
src: '<%= folder.adminTemplate %>/css/template.css'
}
},
// Let's minify some css files
cssmin: {
allCss: {
files: [{
expand: true,
matchBase: true,
ext: '.min.css',
cwd: 'media/vendor/codemirror',
src: ['*.css', '!*.min.css', '!theme/*.css'],
dest: 'media/vendor/codemirror',
}]
},
templates: {
files: [{
expand: true,
matchBase: true,
ext: '.min.css',
cwd: '<%= folder.adminTemplate %>/css',
src: ['*.css', '!*.min.css', '!theme/*.css'],
dest: '<%= folder.adminTemplate %>/css',
}]
}
},
});
// Load required modules
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-scss-lint');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default',
[
'clean:assets',
'shell:update',
'concat:someFiles',
'copy:fromSource',
'sass:dist',
'uglify:allJs',
'cssmin:allCss',
'postcss',
'cssmin:templates',
'updateXML',
'clean:temp'
]
);
grunt.registerTask('test-scss', ['scsslint']);
grunt.registerTask('updateXML', 'Update XML for tinyMCE and Codemirror', function() {
// Update the XML files for tinyMCE and Codemirror
tinyXml = grunt.file.read('plugins/editors/tinymce/tinymce.xml');
codemirrorXml = grunt.file.read('plugins/editors/codemirror/codemirror.xml');
tinyXml = tinyXml.replace(xmlVersionStr, "$1" + settings.vendors.tinymce.version + "$3");
codemirrorXml = codemirrorXml.replace(xmlVersionStr, "$1" + settings.vendors.codemirror.version + "$3");
grunt.file.write('plugins/editors/tinymce/tinymce.xml', tinyXml);
grunt.file.write('plugins/editors/codemirror/codemirror.xml', codemirrorXml);
});
grunt.registerTask('scripts', 'Minifies the javascript files.', function() {
grunt.task.run([
'uglify:allJs'
]);
});
grunt.registerTask('styles', 'Minifies the stylesheet files.', function() {
grunt.task.run([
'cssmin:allCss'
]);
});
grunt.registerTask('compile', 'Compiles the stylesheet files.', function() {
grunt.task.run([
'uglify:templates',
'scsslint',
'sass:dist',
'postcss',
'cssmin:templates'
]);
});
};
from media-manager-improvement.
@dneukirchen can the script from @dgt41 be used in our context?
from media-manager-improvement.
Yes, but we dont need it.
from media-manager-improvement.
using webpack now
from media-manager-improvement.
Related Issues (20)
- Allow copy/cut/paste HOT 5
- Size of image in modal view HOT 4
- Crop on Save only HOT 6
- Proposal: Open folder icon in dropdown HOT 2
- Add onBeforeDelete and onAfterDelete for plug ins HOT 1
- Proposal: Split the table lines in list view into two clickable areas.
- Proposal: Add the dropdowns to list view.
- Item row select in listview is not standard conform. HOT 1
- Colourful bug in notifications.js HOT 1
- File upload progress
- IE11 has problems with JS HOT 7
- MM broken after update with the package from 26 june HOT 2
- Thumbnails and icons HOT 8
- Clicking back/forward buttons of the browser should navigate the folders in file browser
- While editing an image, the form is shown below HOT 1
- Select-Button and -Text need more Contrast HOT 1
- Image not displayed after saving HOT 3
- Image edit - save and close button not working HOT 20
- Image list not updated after saving HOT 7
- Layout is messed up after the update HOT 16
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 media-manager-improvement.