I'm trying to create new grunt task for generating sprites for magento2. I'm using grunt-spritesmith plugin for that. In Gulpfile.js I have mapped sprite task to grunt-spritesmith in JitGrunt config:
require('load-grunt-config')(grunt, {
configPath: path.join(__dirname, configDir),
init: true,
jitGrunt: {
staticMappings: {
usebanner: 'grunt-banner',
sprite: 'grunt-spritesmith'
}
}
});
in dev/tools/grunt/configs I made a config file sprite.js with contents:
'use strict';
module.exports = {
sprite: {
all: {
src: 'app/design/frontend/vendor/default/web/images/spritesheets/*.png',
dest: 'app/design/frontend/vendor/default/web/images/spritesheets.png',
destCss: 'app/design/frontend/vendor/default/web/css/source/_sprites.less'
}
}
};
But grunt sprite gives me
>> No "sprite" targets found.
Or if in different configurations I'm able to register sprite task, I'm not able to pass config with src, dest and destCss params.
You have not include task name. This works:
'use strict';
module.exports = {
all: {
src: 'app/design/frontend/vendor/default/web/images/spritesheets/*.png',
dest: 'app/design/frontend/vendor/default/web/images/spritesheets.png',
destCss: 'app/design/frontend/vendor/default/web/css/source/_sprites.less'
}
};
Related
I want to describe my scenes in a JSON file, and then preload images etc. according to the contents of that JSON file. So the content of the JSON file needs to have been fully loaded before entering preload. I don't know how to do this. I've created a minimal, reproducible jsfiddle that logs preload: undefined when prepreload = true.
For prepreload = false I get create: [object Object].
var prepreload = true
var config = { scene: { init: init, preload: preload, create: create } }
var game = new Phaser.Game(config)
function init(config) {
if (prepreload) {
this.load.json('scenedata', 'scene.json');
this.load.start();
}
}
function preload () {
if (prepreload)
console.log(this.cache.json.get("scenedata"));
else
this.load.json('scenedata', 'scene.json');
}
function create () {
if (!prepreload)
console.log(this.cache.json.get("scenedata"));
}
Any idea how to preload images according to the contents of a JSON file - ideally all inside the Scene class, rather than doing it externally and passing it into the init method or similar.
SettingsConfig can be used for that - the files listed under pack will already have been loaded when entering the init method.
Here's how it can be done (Phaser 3.55.2):
var config = {
scene: {
init: init,
preload: preload,
create: create,
pack: {
"files": [
{ type: 'json', key: 'scene', url: 'scene.json' }
}
}
}
}
var game = new Phaser.Game(config)
Here's a slightly different variant, using TypeScript:
export class TestScene extends Phaser.Scene {
constructor() {
super({ pack: {
"files": [ { type: 'json', key: 'scene', url: 'scene.json' }
I'm trying to copy an index.html file to multiple folders. I've been looking on stack overflow and almost found the solution i'm looking for. The loop in my example only copy's the index.html file to the last folder of the folders array. I wonder what i'm overlooking. any ideas?
module.exports = function(grunt){
grunt.initConfig({
copy:{
files:{
flatten:true,
expand: false,
src: [
'scaffold/index.html',
],
dest: "dist/<%= grunt.option('folder') %>/",
filter: 'isFile',
force: true
}
}
})
function copytoFolders() {
var folders = ["300x600", "300x250", "336x280"], folder;
for (folder in folders)
{
grunt.option('folder', folders[folder]);
grunt.task.run('copy');
}
}
grunt.loadNpmTasks('grunt-contrib-copy-force');
grunt.registerTask('copyFol', copytoFolders)
}
Ok i solved it by looking at this post:
stack overflow post
So basically it now returns a file object array and when the default task is called, it executes the object files.
Here is the script that works for me:
module.exports = function(grunt) {
function getFiles() {
var folders = ["300x600", "300x250", "336x280"];
var files = [];
for (var folder in folders) {
files.push({
flatten:true,
expand: true,
src: [
'scaffold/index.html',
],
dest: "dist/" + folders[folder] + "/",
filter: 'isFile'
});
}
return files;
}
grunt.initConfig({
copy: {
core: {
files: getFiles()
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['copy:core']);
};
I currently have 2 separate webpack builds for server rendered vs client rendered code. Is there an easy way to change the build output based on server/client build?
For example something like this:
// Have some code like this
if(is_client){
console.log('x.y.z')
} else {
server.log('x.y.z')
}
// Webpack outputs:
// replaced code in client.js
console.log('x.y.z')
// replaced code in server.js
server.log('x.y.z')
Have you tried anything like this?
// webpack.config.js
module.exports = () => ['web', 'node'].map(target => {
const config = {
target,
context: path.resolve('__dirname', 'src'),
entry: {
[target]: ['./application.js'],
},
output: {
path: path.resolve(__dirname, 'dist', target),
filename: '[name].js'
},
modules: { rules: ... },
plugins: [
new webpack.DefinePlugin({
IS_NODE: JSON.stringify(target === 'node'),
IS_WEB: JSON.stringify(target === 'web'),
}),
],
};
return config;
});
// later in your code
import logger from 'logger';
if (IS_NODE) {
logger.log('this is node js');
}
if (IS_WEB) {
console.log('this is web');
}
how the compilation works?
// client.bundle.js
import logger from 'logger';
// DefinePlugin creates a constant expression which causes the code below to be unreachable
if (false) {
logger.log('this is node js');
}
if (true) {
console.log('this is web');
}
Finally you will produce your build in production mode, so webpack will include a plugin called UglifyJS, this has a feature called dead code removal (aka tree shaking), so it will delete any unused/unreachable code.
and the final result will look like:
// node.bundle.js
import logger from 'logger';
console.log('this is node js');
//web.bundle.js
console.log('this is node js');
I have made requirejs work for my own modules (with define), but I'm not able to use shim for createjs. I've gone through countless examples and ended up using this: https://github.com/CreateJS/EaselJS/wiki/Using-easeljs-and-tweenjs-with-requirejs, but I'm getting net::ERR_ABORTED error
My module:
define(function (require) {
var createjs = require('createjs');
var start = function () {
var canvas = document.getElementById('canvas');
var stage = new createjs.Stage(canvas);
}
return {
start: start
};
});
My configuration:
require.config({
shim: {
easel: {
exports: 'createjs'
}
},
paths: {
easel: 'libs/easeljs.min'
}
});
I finally found the answer somewhere else; it should be:
require('libs/createjs');
not:
var createjs=require('libs/createjs');
As c
I am using requirejs and gulp to build angular app. I am using amd-optimize and gulp-requirejs-optimize to add all js files into single file. Here is my main.js file:
require.config(
{
paths: {
app : 'app',
angular : '../bower_components/angular/angular',
jquery : '../bower_components/jquery/dist/jquery',
angularResource : '../bower_components/angular-resource/angular-resource',
angularRoute : '../bower_components/angular-route/angular-route',
publicModule : 'public_module',
route : 'route'
},
shim: {
'app': {
deps: ['angular']
},
'angularRoute': ['angular'],
angular : {exports : 'angular'}
}
}
);
And gulpfile.js
var gulp = require('gulp');
var rjs = require('gulp-requirejs');
var connect = require('gulp-connect');
var requirejsOptimize = require('gulp-requirejs-optimize');
var amdOptimize = require('amd-optimize');
var concat = require('gulp-concat');
// using amd-optimize.
gulp.task('bundle', function () {
return gulp.src('app/**/*.js')
.pipe(amdOptimize('main'))
.pipe(concat('main-bundle.js'))
.pipe(gulp.dest('dist'));
});
// using gulp-requirejs-optimize.
gulp.task('scripts', function () {
return gulp.src('app/main.js')
.pipe(requirejsOptimize())
.pipe(gulp.dest('dist'));
});
When I run gulp bundle or gulp scripts, it shows me same content of main.js file in output file(not showing all js template in one output file).
The output file is:
require.config({
paths: {
angular: '../bower_components/angular/angular',
jquery: '../bower_components/jquery/dist/jquery',
angularResource: '../bower_components/angular-resource/angular-resource',
angularRoute: '../bower_components/angular-route/angular-route',
publicModule: 'public_module',
route: 'route'
},
shim: {
'app': { deps: ['angular'] },
'angularRoute': ['angular'],
angular: { exports: 'angular' }
}
});
define('main', [], function () {
return;
});
How can I configure gulp to put every js template into one js file?
check the docs for all the options for amdoptimize. For example you can point to your config file or add paths.
I always have trouble getting all the paths to line up, so make sure to check them diligently.
here is how you can start to put the options in:
gulp.task('requirejsBuild', function() {
gulp.src('app/**/*.js',{ base: 'app' })
.pipe(amdOptimize("app",{
baseUrl: config.app,
configFile: 'app/app-config.js',
findNestedDependencies: true,
}))
.pipe(concat('app.js'))
.pipe(gulp.dest('dist'))
});
You are not requiring any files - you just define an empty module named main.
You need to kick off you app by requiring a module, eg.
require(['app'], function (App) {
new App().init();
});