I have multiple apps in one project, so I have this task:
gulp.task('usemin', function() {
return gulp.src('/app1/index.html')
.pipe(usemin({
js: [ uglify(), rev() ]
}))
.pipe(gulp.dest('app1/build/'));
});
And this is the index.html:
<!-- build:js app.js -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/d3/d3.min.js"></script>
.
.
.
<!-- endbuild -->
The task runs without issues but generates no file!
You're using an absolute path here:
return gulp.src('/app1/index.html')
You probably want to use a project relative path:
return gulp.src('app1/index.html')
Have you tried appending to relative path on gulp.src?
return gulp.src('./app1/index.html')
Read the Doc for more details.
Related
I am trying to install the docsify copy code plugin. However it doesn't work nothing change in my HTML yet I did all the required steps to make this works.
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<script>
window.$docsify = {
copyCode: {
buttonText : 'Copy to clipboard',
errorText : 'Error',
successText: 'Copied'
},
plugins: [
window.DocsifyCopyCodePlugin.init()
]
}
<srcipt>
Any suggestion ?
The order you load scripts is important in docsify.
You start by defining your configuration (window.$docsify), then loading the main script and finally adding any plugins.
Here are your tags in the right order so they should work together :
<!-- Configuration -->
<script>
window.$docsify = {
copyCode: {
buttonText : 'Copy to clipboard',
errorText : 'Error',
successText: 'Copied'
}
}
</script>
<!-- Main Script -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- Docsify plugins -->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
Also usage of the init function of plugins is usually not required as they'll init as soon as they load.
I'm having some trouble figuring our why express is attaching every javascript file in my bower modules instead of just the ones I specify in the assets.json file. I get the feeling it's a daft mistake somewhere, I just don't understand where!
My assets file looks like so:
{
"css": {
"public/build/css/dist.min.css": [
"public/lib/angular-snap/angular-snap.min.css",
"public/lib/animate.css/animate.min.css",
"public/lib/bootstrap/dist/css/bootstrap.min.css",
"public/lib/font-awesome/css/font-awesome.min.css",
"public/lib/angular-toggle-switch/angular-toggle-switch.css",
"public/lib/intro.js/minified/introjs.min.css",
"public/lib/ng-table/ng-table.css",
"public/lib/leaflet-dist/leaflet.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.Default.css",
"public/css/common.css"
]
},
"js": {
"public/build/js/dist.min.js": [
"public/lib/angular/angular.min.js",
"public/lib/angular-bootstrap/ui-bootstrap.js",
"public/lib/angular-bootstrap/ui-bootstrap-tpls.js",
"public/lib/angular-cookies/angular-cookies.js",
"public/lib/angular-leaflet-directive/dist/angular-leaflet-directive.js",
"public/lib/angular-resource/angular-resource.js",
"public/lib/angular-route/angular-route.js",
"public/lib/angular-sanitize/angular-sanitize.js",
"public/lib/angular-snap/angular-snap.min.js",
"public/lib/angular-toggle-switch/angular-toggle-switch.js",
"public/lib/angular-ui-utils/ui-utils.min.js",
"public/lib/d3/d3.min.js",
"public/lib/highcharts-ng/dist/highcharts-ng.min.js",
"public/lib/intro.js/minified/intro.min.js",
"public/lib/leaflet-dist/leaflet.js",
"public/lib/leaflet-plugins/layer/tile/Google.js",
"public/lib/leaflet.markerclusterer/dist/leaflet.markercluster.js",
"public/lib/modernizr/modernizr.js",
"public/lib/momentjs/min/moment.min.js",
"public/lib/ng-table/ng-table.js",
"public/lib/snapjs/snap.min.js",
"public/lib/typeahead.js/dist/typeahead.bundle.min.js",
"public/lib/underscore/underscore-min.js",
"public/lib/underscore.string/dist/underscore.string.min.js",
"public/*/*.js",
"public/*/*/*.js"
]
}
}
I create an assets variable in express.js here:
// Import your asset file
var assets = require('./assets.json');
assetmanager.init({
js: assets.js,
css: assets.css,
debug: (process.env.NODE_ENV !== 'production'),
webroot: 'public'
});
And finally add these to my view using an each loop in my jade template
- each file in assets.js
script(type='text/javascript' src=file)
What I'm expecting to happen is that all the scripts I've listed in assets.json be added to my template. Instead it seems to include all .js files under public/lib - which as you can imagine causes some unusual results.
A sample of which is here
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/animate.css/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/d3/d3.js"></script>
<script type="text/javascript" src="/lib/d3/d3.min.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/karma.conf.js"></script>
<script type="text/javascript" src="/lib/intro.js/intro.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
Turns out it was a daft mistake. The last two rules in my assets file included the lib folder because of the asterisks.
I am using the following code Html to load the scripts that I need. I am getting $ as Undefined. It is not able to load the jquery.
How can I get this to work.
<html>
<head>
<title>Using The Text Plugin With RequireJS</title>
<script data-main="Scripts/init type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.6/require.min.js"></script>
<script type="text/javascript" language="javascript">
require(['jquery', 'knockout-2.2.1', 'Template', 'text!Template.htm'], function ($, ko, t, temp) {
$("body").append(temp);
//make this new template engine our default engine
ko.setTemplateEngine(t.myExternalTemplateEngine(t.templates));
ko.applyBindings(t);
});
</script>
</head>
code in Init.js in a separate file
require.config({
baseUrl:'Scripts',
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js',
'knockout-2.2.1': '//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js',
'knockout.mapping-latest': '//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js',
'Template': 'Template',
'text': '//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.5/text',
'domready': '//cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady.js'
}
});
Remove the .js from your paths configuration:
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery'
}
More detail in this example repo
Goal:
Dynamically include /static/js/**/*.js and /static/css/**/*.css files too <head>
Method:
I am using client side templating partials, so in this example, I would like to write filepaths of everything in:
/static/js/**/*.js too /templates/head.js.dust
/static/css/**/*.css too /templates/head.css.dust
File paths are not enough of course. I need a way to preprocess the the output so that every "file" is wrapped by appropriate tags like:
<!-- /templates/head.js.dust -->
<script src="/static/js/assests/jquery.js"></script>
<script src="/static/js/assests/jquery_ui.js"></script>
<script src="/static/js/app.js"></script>
...
<!-- /templates/head.css.dust -->
<link src="/static/css/assests/jquery_ui.css"/>
<link src="/static/css/app.css"/>
...
Question:
Is there a grunt module out there that already does something like this?
Bonus Points: How do I even get started building something like this if it does not?
You can do so in a fairly easy way:
grunt.registerMultiTask("assetAppend", "Append JS/CSS assets to a file", function() {
var paths = grunt.file.expand( this.data.paths ),
out = this.data.output,
contents = "";
paths.forEach(function( path ) {
if ( /\.js$/i.test( path ) ) {
contents += '<script src="' + path + '"></script>';
} else if ( /\.css$/i.test( path )) {
contents += '<link rel="stylesheet" type="text/css" href=' + path + ' />';
}
});
grunt.file.write( out, contents );
});
grunt.initConfig({
assetAppend: {
js: {
paths: ["static/js/**/*.js"],
output: "head.js.dust"
},
css: {
paths: ["static/css/**/*.css"],
output: "head.css.dust"
}
}
});
This example is now part of my plugin grunt-contrib-assetpush
I am new to YUI. Just trying to get a most basic functioning example working on my site.
Here is the code:
<button id="mytest">test</button>
<script type="text/javascript">
var helloWorld = function(e) {
alert("Hello World!");
}
</script>
<script type="text/javascript">
alert('xx');
YAHOO.util.Event.addListener("mytest", "click", helloWorld);
alert('x2');
</script>
The xx alert shows, but the x2 alert never does. And, clicking on the button does not fire the HelloWorld function.
I have the necessary include files:
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/progressbar/assets/skins/sam/progressbar.css">
<!-- Dependency source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js" ></script>
<script src = "http://yui.yahooapis.com/2.8.1/build/element/element-min.js" ></script>
<!-- Optional dependency source file -->
<script src="http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js" type="text/javascript"></script>
<!-- ProgressBar source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/progressbar/progressbar-min.js" ></script>
you should be sure the js files are included on you html files,the code your write is write!
Believe I found it. Or at least I was able to find other examples which worked. But in my case I believe the problem is the js files I was referencing in fact did not exist. Namely this file:
http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js
sure, it is yahoo dash dom DASH event, not yahoo dash dom DOT event