I'm looking for an answer to this, doesn't have to be in depth or great detail. Just want to know exactly what happening with the sequence of the task.
gulp.task('name',['*this right here*'], function() {
// content
});
Does it mean do this task in consecutively namely with this definition task? Why this came up for me is because in my gulpfile.js I'm using gulp-inject for app files and wiredep for vendor dependencies. If this is wrong or either one will do then great, Im under the impression not though. What I have so far is below.
//originally i didn't have bower here in the array in 2nd param.
gulp.task('index', ['bower'], function() {
var target = gulp.src(files.app_files.target);
var sources = gulp.src(files.app_files.sources, {
read: false
});
return target.pipe(inject(sources))
.pipe(gulp.dest('./dist'));
});
gulp.task('bower', function() {
return gulp
.src(files.app_files.target)
.pipe(wiredep())
.pipe(gulp.dest('dist/'));
});
<head>
<meta charset="UTF-8">
<title>Example Page</title>
<!-- Vendor Files -->
<!-- bower:css -->
<!-- endbower -->
<!-- App Files -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<navigation></navigation>
<div ui-view></div>
<footer-area></footer-area>
<!-- Vendor Files -->
<!-- bower:js -->
<!-- endbower -->
<!-- App Files -->
<!-- inject:js -->
<!-- endinject -->
</body>
Update
gulp.task('index', function() {
var target = gulp.src(files.app_files.target);
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src(files.app_files.sources, {
read: false
});
return target
//here instead of breaking into new task i piped inject and wiredep, works great
.pipe(inject(sources))
.pipe(wiredep())
.pipe(gulp.dest('./dist'));
});
That's an array of tasks to run before your task.
Also, note those tasks (all the ones in the array, in you case there's only bower) run in parallel.
If you need some in sequence. Consider gulp-sequence
Related
i'm trying to deploy a flutter web app to GitHub Pages.
First of all, i was getting the same problem as this, and their solution worked for me too.
This means that i add the <base href='/web'> to my index.html
But now, when i'm lauching my url from GitHub Pages, the site is loading too lazily, what i think isn't the correct behavior. Like you can see in the image below:
Is there a way to lauch the site faster? What should i do?
In general, website loading times are related to the bundle size. Flutter web apps tends to have large bundles, so the load times will inevitably be longer than websites built with other technologies.
So, i was searching and a friend observed that the serviceWorker, in the index.html file, was the problem. Now my app runs as fast as it shoud be.
Apparently, that function was trying to execute something and failed (but this failure cost 4 seconds, stipulated in code). So i commented this all and added a loadMainDartJs() call in the start, as you can see below:
loadMainDartJs();
<!-- if ('serviceWorker' in navigator) {-->
<!-- // Service workers are supported. Use them.-->
<!-- window.addEventListener('load', function () {-->
<!-- // Wait for registration to finish before dropping the <script> tag.-->
<!-- // Otherwise, the browser will load the script multiple times,-->
<!-- // potentially different versions.-->
<!-- var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;-->
<!-- navigator.serviceWorker.register(serviceWorkerUrl)-->
<!-- .then((reg) => {-->
<!-- function waitForActivation(serviceWorker) {-->
<!-- serviceWorker.addEventListener('statechange', () => {-->
<!-- if (serviceWorker.state == 'activated') {-->
<!-- console.log('Installed new service worker.');-->
<!-- loadMainDartJs();-->
<!-- }-->
<!-- });-->
<!-- }-->
<!-- if (!reg.active && (reg.installing || reg.waiting)) {-->
<!-- // No active web worker and we have installed or are installing-->
<!-- // one for the first time. Simply wait for it to activate.-->
<!-- waitForActivation(reg.installing ?? reg.waiting);-->
<!-- } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {-->
<!-- // When the app updates the serviceWorkerVersion changes, so we-->
<!-- // need to ask the service worker to update.-->
<!-- console.log('New service worker available.');-->
<!-- reg.update();-->
<!-- waitForActivation(reg.installing);-->
<!-- } else {-->
<!-- // Existing service worker is still good.-->
<!-- console.log('Loading app from service worker.');-->
<!-- loadMainDartJs();-->
<!-- }-->
<!-- });-->
<!-- // If service worker doesn't succeed in a reasonable amount of time,-->
<!-- // fallback to plaint <script> tag.-->
<!-- setTimeout(() => {-->
<!-- if (!scriptLoaded) {-->
<!-- console.warn(-->
<!-- 'Failed to load app from service worker. Falling back to plain <script> tag.',-->
<!-- );-->
<!-- loadMainDartJs();-->
<!-- }-->
<!-- }, 4000);-->
<!-- });-->
<!-- } else {-->
<!-- // Service workers not supported. Just drop the <script> tag.-->
<!-- loadMainDartJs();-->
<!-- }-->
At the moment i don't need serviceWork, and this suits weel for me.
I am creating Gulp task that will inject js and css using wiredep.
below is how it is getting injected.
<!-- inject:js -->
<script src="/src/config/app.js"></script>
<!-- endinject -->
but I need to inject
<!-- inject:js -->
<script src="config/app.js"></script>
<!-- endinject -->
How do I Ignore '/src/'?
This is what I have tried and didn't work.
Gulp task is below
gulp.task('wiredep', ['styles'], function(){
var options = {
bowerJson: require('./bower.json'),
directory: './bower_components/',
ignorePath: './src/'
};
var wiredep = require('wiredep').stream;
return gulp
.src(config.index)
.pipe(wiredep(options))
.pipe($.inject(gulp.src('./src/**/*.js')))
.pipe(gulp.dest(config.dist));
});
Thanks,
Kashyap
You don't say what result you're getting so it's difficult to troubleshoot, but all you have to do is match the path exactly (unless you want to use regex), so in your case this should do the trick;
ignorePath: '/src/'
Wiredep is used to inject bower dependance into html, and i see you must want to inject the general js file, maybe it can work fine below:
gulp.task('inject', ['styles'], function(){
var options = {
ignorePath: 'src/',
addRootSlash: false
};
return gulp
.src(config.index)
.pipe($.inject(gulp.src('./src/**/*.js'), options))
.pipe(gulp.dest(config.dist));
});
Hoping this helps.
You can exclude folders:
var options = {
...
exclude: [/\/src/],
...
};
I have a html setup in my app folder and this is copied in the dist folder by gulp.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../dist/css/style.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
<!-- build:jsLib js/libs.js -->
<script src="../libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
<!-- build:jsApp js/app.js -->
<script src="app.js"></script>
<!-- endbuild -->
<script src="../libs/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript">
angular.module('testApp', ['mockService', 'productServicesApp', 'ngMockE2E']);
</script>
</body>
</html>
That part is used to make fake service calls and I don't want it in deployment files:
//something like *ignore this*
<script type="text/javascript">
angular.module('testApp', ['mockService', 'productServicesApp', 'ngMockE2E']);
</script>
Is is possible to ignore this line with gulp?
Yes this is possible. A nice plugin to do this would be the gulp-remove-code plugin.
Below is an example of how you would use it
HTML:
<div>
<!--removeIf(production)-->
<div class="sandbox-banner">Running in sandbox environment</div>
<!--endRemoveIf(production)-->
<span>Removing code is ready.</span>
</div>
GULP:
var gulp = require('gulp');
var removeCode = require('gulp-remove-code');
HTML_FILES = '/path/to/html/**/*.html';
gulp.task('clean-html', function() {
return gulp.src(HTML_FILES)
.pipe(removeCode({ production: true }))
.pipe(gulp.dest('dist/'));
});
And then you just call it by saying
gulp clean-html
Anything inside of those comment tags will be removed. Also, the object passed to removeCode is not namespace specific. So you can change the naming to whatever.
If I want to inject Js Files in diff. locations e.g. <head> here and here </body>. I need to set names like described here for the injections:
https://github.com/klei/gulp-inject#method-2-use-gulp-injects-name-option
<!-- head:js -->
<!-- only importantFile.js will be injected here -->
<!-- endinject -->
How can I modify this selector, that I don't have to name each file. E.g. take all files which contain *_important.js
.pipe(inject(gulp.src('./src/importantFile.js', {read: false}), {name: 'head'}))
And is there a better way. E.g. like adding s.th. inside the javascript file or name it like this orderModule.above.js, googleAnalytics.below.js
From the gulp documentation:
gulp.src(globs[, options]) - Emits files matching provided glob or an array of globs.
You therefore have tremendous freedom to define how you want to differentiate between "important" files and others.
.pipe(inject(gulp.src('*_important.js')))
.pipe(inject(gulp.src('*.head.js')))
etc. Then just provide the negation of this pattern in the second gulp.src call
.pipe(inject(gulp.src(['*.js', '!*_important.js'])))
.pipe(inject(gulp.src(['*.js', '!*.head.js'])))
gulp.task('dev', function () {
var target = gulp.src('./index.html');
return target
.pipe(inject(gulp.src('_MAIN_CSS_FILES_', {read: false})))
.pipe(inject(gulp.src('_BOWER_CSS_FILES_', {read: false}), {name: 'bower'}))
.pipe(inject(gulp.src('_MAIN_JS_FILES_', {read: false})))
.pipe(inject(gulp.src('_BOWER_JS_FILES_', {read: false}), {name: 'bower'}))
.pipe(gulp.dest("./dest/"));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<!-- inject:css -->
<!-- built css files will go here... -->
<!-- endinject -->
<!-- bower:css -->
<!-- bower installed css files will go here... -->
<!-- endinject -->
</head>
<body>
<!-- bower:js -->
<!-- bower installed js files will go here... -->
<!-- endinject -->
<!-- inject:js -->
<!-- built js files will go here... -->
<!-- endinject -->
</body>
</html>
When deploying my app I want to copy the bower dependency to the deploy directory and inject the links to these files into the index.html that is also in the deploy directory.
Each step alone works perfectly by I'm not able to combine them.
Copy the files:
return gulp.src(mainBowerFiles(), { read: false })
.pipe(gulp.dest('./deploy/lib/'));
Injecting the files:
return gulp.src('./deploy/index.html')
.pipe(plugins.inject(
gulp.src(mainBowerFiles(), { read: false }), { relative: true }))
.pipe(gulp.dest('./deploy/'));
I think that I should do this in one step to keep the correct order of the dependent files.
I tried this combination but it did not work out.
return gulp.src('./deploy/index.html')
.pipe(plugins.inject(
gulp.src(mainBowerFiles(), { read: false })
.pipe(gulp.dest('./deploy/lib/'), { relative: true })))
.pipe(gulp.dest('./deploy/'));
I recommend wiredep:
You add a block to your html:
<html>
<head>
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
and your wiredep task looks like:
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/*.html')
.pipe(wiredep())
.pipe(gulp.dest('app'));
});
Which will add the deps to your html as such:
<html>
<head>
</head>
<body>
<!-- bower:js -->
<script src="bower_components/foo/bar.js"></script>
<!-- endbower -->
</body>
</html>
You can then combine this with useref to order all your project's javascript dependencies
html block
<!-- build:js scripts/app.js -->
<!-- bower:js -->
<script src="bower_components/foo/bar.js"></script>
<!-- endbower -->
<script src="js/yourcustomscript.js"></script>
<!-- endbuild -->
gulp task
gulp.task('html', ['styles'], function () {
var assets = $.useref.assets({searchPath: '{.tmp,app}'});
return gulp.src('app/*.html')
.pipe(assets)
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest('dist'));
});
Take a look at how generator-gulp-webapp does things: https://github.com/yeoman/generator-gulp-webapp
Note: the $.plugin syntax assumes var $ = require('gulp-load-plugins')();