I'm working on an app written using Polymer components and was working on automating some of the unit tests for our custom components. Ideally I'd like to be able to have something like
files: [
'public/js/bower/platform/platform.js',
'node_modules/sinon/pkg/sinon-1.10.2.js',
'public/components/*.html',
{pattern: 'public/components/*.js', included: false, served: true},
{pattern: 'public/js/bower/**', included: false, served: true},
{pattern: 'public/js/*.js', included: false, served: true},
'test/components/polymer-*-tests.js'
],
in my karma.confg.js file, so that it loads any components and tests we add in the future without having to manually add them. However, while this correctly results in <link rel="import">s for all of the components in the components folder, only the first is being properly registered by Polymer (tests for the rest are all failing). If I manually add each component to the list, such as:
files: [
'public/js/bower/platform/platform.js',
'node_modules/sinon/pkg/sinon-1.10.2.js',
'public/components/poly-component-1.html',
'public/components/poly-component-2.html',
'public/components/poly-component-3.html',
{pattern: 'public/components/*.js', included: false, served: true},
{pattern: 'public/js/bower/**', included: false, served: true},
{pattern: 'public/js/*.js', included: false, served: true},
'test/components/polymer-*-tests.js'
],
then everything works fine. I've also gotten it to work if I add something similar to
var link = document.createElement('link');
link.rel = 'import';
link.href = 'base/public/components/<component-name>.html;
document.getElementsByTagName('head')[0].appendChild(link);
at the beginning of each test file, or creating a bootstrap script with
components = [
'polymer-component-1',
'polymer-component-2',
'polymer-component-3'];
for (var i = 0; i < components.length; i++) {
var link = document.createElement('link');
link.rel = 'import';
link.href = '/base/public/components/' + components[i] + '.html';
document.getElementsByTagName('head')[0].appendChild(link);
}
and making sure karma loads it before the tests. However, these three solutions all involve manual edits of files (or remembering to include some boilerplate at the beginning of test files that isn't normally there).
Does anyone have any ideas as to why using the wildcard pattern seems to not be working? Karma does appear to be adding the html imports properly to the context iframes, and the html and js files for the components are being loaded into the browsers. The components just seem to not be registering.
Not sure what error message looks like when you said "tests for the rest are all failing".
However, I personally found something similar, but I nailed it down to the problem that karma could possibly include my html twice. See the issue I logged it to karma-runner project for more info.
Related
Since updating to version 3 of gulp-imagemin, I'm having difficulty pushing options through when running the task.
I can see in the documentation that the syntax for the options has changed, but I'm having no luck with the new syntax as described.
Here's what I have working in v2.4.0:
.pipe($.imagemin({
progressive: true,
interlaced: true,
svgoPlugins: [
{cleanupIDs: false}
, {removeUnknownsAndDefaults: false}
]
}))
I've upgraded to version 3 and as per the instructions in the release notes, I've changed the syntax to the following:
.pipe($.imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.mozjpeg({progressive: true}),
imagemin.svgo({plugins: [
{cleanupIDs: false}
, {removeUnknownsAndDefaults: false}
]})
]))
However, when running the task this throws an error:
Reference error: imagemin is not defined
I'm fairly new to gulp and the like, so there may be something fairly obvious I'm missing, but I've experimented with lots of subtle changes to the syntax, all to no avail. Can anyone help?
Define imagemin first.
const imagemin = require(‘gulp-imagemin’);
Then use imagemin instead of $.imagemin.
Question Part 1
In my current setup, I have a folder that looks like this:
/wwwroot <-- Hosted in localhost
/_project <-- Contains gruntfile.js
/_dev <-- Contains Source Code
The wwwroot folder is hosted in XAMPP and open in my browser. The _project folder contains my gruntfile.js, and _dev contains all the JS and SCSS that is compiled into JS and CSS by Grunt.
This has worked fine for a year or two, but recently, I updated my packages, and the generated sourcemaps have begun breaking. Chrome shows a blank code panel in Sources, and Firefox Dev displays a 404 error's HTML in the sources code panel. The sources were now being looked for inside the /wwwroot folder. Because of this, the sources 404 and aren't shown, and I can't use sourcemap debugging which I rely on.
Relevant parts of Gruntfile:
uglify: {
common: {
options: {
mangle: false,
compress: true, // true or false or {}
preserveComments: 'all', // true or 'all' or 'some'
sourceMap : true
},
files: {
// '../wwwroot/Content/includes/js/libs.js': ['../_dev/js/common/libs/*.js'],
'../wwwroot/Content/includes/js/buildbar.js': ['../_dev/js/common/buildbar/*.js'],
'../wwwroot/Content/includes/js/framework.js': ['../_dev/js/common/framework/*.js'],
}
},
}
Short of painfully rearranging my directory structure... how can I fix this?
Question part 2:
I've tried using grunt-uglify-contrib's sourceMapRoot option as follows:
uglify: {
common: {
options: {
mangle: false,
compress: true, // true or false or {}
preserveComments: 'all', // true or 'all' or 'some'
sourceMap : true,
sourceMapRoot: "C:/Users/quint/Documents/Github/build-siteengine/a/a/a/a"
},
files: {
// '../wwwroot/Content/includes/js/libs.js': ['../_dev/js/common/libs/*.js'],
'../wwwroot/Content/includes/js/buildbar.js': ['../_dev/js/common/buildbar/*.js'],
'../wwwroot/Content/includes/js/framework.js': ['../_dev/js/common/framework/*.js'],
}
},
}
For some reason, though, the paths that show in the Sources panel in Firefox Dev are missing four directories, hence why I've added the /a/a/a/a. Why would this be happening?
This also doesn't solve my problem, since in Firefox Dev clicking on the line numbers open the file in the browser and don't take me to the line of code in the debugger, and in Chrome there is no effect.
I have the following function that creates a extjs window. Within the php page is some javascript (for now just a alert("test")) But the alert fails to fire. My understanding is that setting scripts to true should execute script tags.
function loadTilePage(tileId){
var url= "page.php";
var yourWindow = new Ext.Window({
title: 'title',
autoScroll: true,
resizable :false,
height:Ext.getBody().getViewSize().height*.60,
width:Ext.getBody().getViewSize().width*0.55,
loader:{
url:url,
scripts: true,
renderer: 'html',
autoLoad: true
}
});
yourWindow.show();
yourWindow.center();
}
In the end of the php response is this:
<script type="text/javascript">
alert("test");</script>
Injecting script into element markup is blocked by browser. Example:
document.getElementById('div').innerHTML = '<scr' + 'ipt>alert(123);</scr' + 'ipt>'; // this won't work
Fiddle: http://jsfiddle.net/g3dahakr/
You should probably find other way to do that. In Ext JS you can require other JS modules, so IMO instead of using loader it is better to replace page.php with Ext component and load it using require.
I'm probably trying to make gulp do something that's not idiomatic, but here goes.
I want my build task to only run if the source files are newer than the output file.
In gulp, it seems standard practice to create a build task that always runs, and then set up a watch task to only run that build task when certain files change. That's okay, but it means that you always build on the first run.
So, is it possible to do what I want? Here's what I've got so far (newer is gulp-newer):
gulp.task('build_lib', function() {
return gulp.src(["app/**/*.ts"])
.pipe(newer("out/outputLib.js")) //are any of these files newer than the output?
** NEED SOMETHING HERE **
how do I say, "If I got _any_ files from the step before, replace all of them with a single hardcoded file "app/scripts/LibSource.ts" "?
.pipe(typescript({
declaration: true,
sourcemap: true,
emitError: false,
safe: true,
target: "ES5",
out: "outputLib.js"
}))
.pipe(gulp.dest('out/'))
});
I tried using gulpif, but it doesn't seem to work if there are no files going into it to begin with.
.pipe(gulpif(are_there_any_files_at_all,
gulp.src(["app/scripts/LibSource.ts"])))
However, my condition function isn't even called because there are no files on which to call it. gulpif calls the truthy stream in this case, so LibSource gets added to my stream, which isn't what I want.
Maybe doing all of this in a single stream really isn't the right call, since the only reason I'm passing those files through the "gulp-newer" filter is to see if any of them is newer. I'm then discarding them and replacing them with another file. My question still stands though.
You can write your own through/transform stream to handle the condition like so:
// Additional core libs needed below
var path = require('path');
var fs = require('fs');
// Additional npm libs
var newer = require('gulp-newer');
var through = require('through');
var File = require('vinyl');
gulp.task('build_lib', function() {
return gulp.src(["app/**/*.ts"])
.pipe(newer("out/outputLib.js"))
.pipe(through(function(file) {
// If any files get through newer, just return the one entry
var libsrcpath = path.resolve('app', 'scripts', 'LibSource.ts');
// Pass libsrc through the stream
this.queue(new File({
base: path.dirname(libsrcpath),
path: libsrcpath,
contents: new Buffer(fs.readFileSync(libsrcpath))
}));
// Then end this stream by passing null to queue
// this will ignore any other additional files
this.queue(null);
}))
.pipe(typescript({
declaration: true,
sourcemap: true,
emitError: true,
safe: true,
target: "ES5",
out: "outputLib.js"
}))
.pipe(gulp.dest('out/'));
});
I know like, this question was posted over 4 years ago, however; I am sure this problem crosses the path of everyone, and although I think I understand the question that is being asked, I feel that there is an easier way to perform this task, off which, I posted a similar question recently on stackoverflow at New to GULP - Is it necessary to copy all files from src directory to dist directory for a project?
It uses gulp-changed, and for me, it worked like a charm, so for others who may look at this post for similar reasons, have a look at my post and see if it is what you are looking for.
Kind Regards
You don't need to build first. You can on your 'first run' only run the watch task from which you run all the other ones.
example:
// Create your 'watch' task
gulp.task( 'watch', function() {
gulp.watch( 'scripts/*.js', [ 'lint', 'test', 'scripts' ] );
gulp.watch( 'styles/sass/*.scss', [ 'sass_dev' ] );
} );
// On your first run you will only call the watch task
gulp.task( 'default', [ 'watch' ] );
This will avoid running any task on startup. I hope this will help you out.
May I suggest gulp-newy in which you can manipulate the path and filename in your own function. Then, just use the function as the callback to the newy(). This gives you complete control of the files you would like to compare.
This will allow 1:1 or many to 1 compares.
newy(function(projectDir, srcFile, absSrcFile) {
// do whatever you want to here.
// construct your absolute path, change filename suffix, etc.
// then return /foo/bar/filename.suffix as the file to compare against
}
Due to a FUBAR directory organization in a project, I have spent some time re-organizing JS scripts on said project. The project uses requirejs and was functioning wonderfully before the re-org. However, now nothing loads when called or compiles (we use the r.js optimizer) when run -- though compiling completes without complaint. I have checked, double-checked, triple-checked, and now given in to asking for another set of eyes here on Stack Overflow.
Using RequireJS: 2.1.4 and r.js 2.1.4
The following is my configuration:
build-js.js (used for optimizer)
var requirejs = require('requirejs');
var config = {
baseUrl: './public/js',
mainConfigFile: './public/js/config/config.js',
paths: {
'requireLib': 'library/require'
},
out: ".public/js/minified/main.js",
name: "minified/main",
wrap: false,
preserveLicenseComments: false,
deps: ["app/main","modules/movie","modules/theatre"]
};
requirejs.optimize(config);
config.js
// Set the require.js configuration for your application.
require.config({
paths: {
// JavaScript folders
libs: "library",
plugins: "plugin",
app: "app",
adminlibs: "../adminassets/js/plugins/ui",
// Libraries
jquery: "library/jquery",
jqcookie: "library/jquery.cookie",
jqui: "../adminassets/js/plugins/ui/jquery-ui-1.10.0.custom.min",
jqezmark: "library/jquery.ezmark",
jqcolor: "library/jquery.color",
underscore: "library/underscore-amdjs",
backbone: "library/backbone-amdjs",
chosen: "library/chosen.jquery",
moment: "library/moment",
// Site Components
site: "app/site",
sitediscussion: "app/site-discussion",
namespace: "app/namespace",
// Plugins
text: "plugin/text",
async: "plugin/async",
use: "plugin/use",
datetimepicker: "../adminassets/js/plugins/ui/jquery.datetimepicker",
ajaxfileupload: "../adminassets/js/plugins/uploader/jquery.ajaxfileupload"
},
shim: {
'chosen': ['jquery'],
'jqcookie': ['jquery'],
'jqui': ['jquery'],
'jqezmark': ['jquery'],
'jqcolor': ['jquery'],
'site': {
deps: ['jquery','jqezmark','chosen','underscore','namespace','jqui','jqcookie'],
exports: 'site'
},
'sitediscussion': {
deps: ['jquery', 'underscore'],
exports: 'sitediscussion'
},
'jquifull' : ['jquery'],
'datetimepicker' : ['jqui'],
'ajaxfileupload' : ['jquery'],
'backbone': ['underscore','jquery']
},
// Initialize the application with the main application file
deps: ["app/main"]
});
File structure is as follows:
{site-root}/public/js
Which contains directories:
app
config
library
minified
modules
plugin
templates
All files listed above in build-js and config.js are confirmed to be in the expected folders.
requirejs is called as follows:
On dev machines (which I'm currently testing the setup on):
data-main="/js/config/config" src="/js/library/require.js"
On production (currently the minified/main file is not even being created, though it should be)
data-main="/js/minified/main" src="/js/library/require.js"
Can anyone see what I may be doing wrong? Again, there have been no changes to the site proper, the javascript, etc except in the two files (build-js.js and config.js) listed above. The only changes are that files have been physically moved in the directory structure. As a result, I'm nearly positive that I have a pathing issue somewhere, but I cannot seem to find it. Help?
Resolution has been found. I was referencing my configuration file through the data-main attribute in the requirejs include script tag at "/js/config/config". Though I declared a base-path of /public/js, the system was still attempting to use /js/config/ as my base path ( as stated in requirejs documentation that it will base-path based off your data-main attribute if a base path is not otherwise declared ). I moved my config.js file to /js and changed data-main to /js/config and now all paths are working appropriately, referencing base-path /js.
A side-note is that I did not notice the failure of files to load because of my use of Zend Framework and error handling. There were no 404 Errors and the Network tab of my dev-tools showed success in loading all .js files ... it was only when I looked at the response-content of those files that I found they were spitting out PHP error logs rather than .js content.