Not able to correctly inject files using gulp - javascript

My app structure is following:
-gulp
-src
-app
-assets
-css
I want to insert files from "css" folder in index.html which is in "src" folder.

use the below code and set the path accurately.
var inject = require('gulp-inject');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task('inject', function () {
var injectStyles = gulp.src(['css/*.css'], { read: false } );
return gulp.src( '/src/index.html')
.pipe($.inject(injectStyles, { relative: true }))
.pipe(gulp.dest('/src'));
});
specially you need to enter styles comment tag in your html file as below:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- inject:css -->
<!-- endinject -->
</head>

Related

require is not defined in an electron app

I am new to electron. While learning it i came across require not define error on browserwindow. So i searched about it and find out we should need to add nodeIntegration: true, so i did it but still it doesnt solve my problem.
here is my app.js (entry file)
function createWindow() {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file",
slashes: true,
})
);
win.on("close", () => {
win = null;
});
}
app.on("ready", createWindow);
and my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>main renderer</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>main renderer</h1>
<script>
require("./index.js")
</script>
</body>
</html>

How do I link a JavaScript file to HTML in Express?

I’m running a NodeJS server with Express, using Handlebars as the engine.
app.use(express.static(publicDirPath))
(...)
app.engine("hbs",hbs({
extname: "hbs",
defaultView: "main",
layoutsDir: path.join(srcDirPath, "views/layouts"),
partialsDir: path.join(srcDirPath, "views/partials"),
}));
(...)
app.listen(3000, () => {
console.log("Server started at port 3000.");
});
I have a login page:
app.get("/Login", (req, res) => {
res.render("Login", { layout: "Loginlayout" });
});
app.get("/public/js/login.js", (req, res) => {
res.header("Content-Type", "application/javascript")
res.end();
});
– which is using this header:
<head>
<script src="/public/js/login.js" async></script>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/login.css">
<title>Login</title>
</head>
– but I cannot use any of the functions from in login.js.
I also got some "MIME type (“text/html”) mismatch" errors, but I think I fixed them by using
res.header("Content-Type", "application/javascript")
– but I still can’t use any of the functions. I also tried multiple browsers, but nothing worked.
Let app.use(express.static(publicDirPath)) play it's role. Move local js/css file under publicDirPath dir, the express will serve assets' path for you.

What is wrong with my Babel configuration?

I have configured Babel for my project with ".babelrc" file. My .babelrc file is,
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
I have imported "core-js/stable" and "regenerator-runtime/runtime" using index.js in my index.html as follows. I'm using Parcel as the packaging tool.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/index.js"></script>
<title>Document</title>
</head>
<body>
<h1>Hello Second App</h1>
<script>
(() => {
console.log('welcome ...');
})();
function getUserById(id) {
return Promise.try(function () {
if (typeof id !== "number") {
throw new Error("id must be a number");
}
return "done";
});
}
getUserById();
</script>
</body>
</html>
Also as you can see I'm trying to use "Promise.try". But I'm getting
Promise.try is not a function
So why Babel is not fixing this? Please help me. I'm trying to understand Babel.

Angular is not defined Gulp.js

I still have this error Angular is not defined. Im 99.9999% Sure its something to do with the paths not being confugred properly, but im out of clue. I cant fix it! This is my folder structure as of now:
bower_components/
node_modules/
app/
components/
home/
controller/
homeCtrl.js
css/
home.css
home.html
shared/
css/
directives/
filters/
directives/
sass/
services/
assets/
audio/
debug/
dist/
app.min.js
vendor.min.js
lib/
etc...
gulp/
paths.js
gulpfile.js
index.html
etc....
It for some reason says angular is not defined.
Gulpfile.js:
//Require Gulp
var gulp = require("gulp");
var ngAnnotate = require("gulp-ng-annotate");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var sourceMaps = require("gulp-sourcemaps");
var util = require('gulp-util');
var coffee = require("gulp-coffee")
var clean = require("gulp-clean");
var expect = require('gulp-expect-file');
var sass = require('gulp-sass');
var es = require('event-stream');
var ng_annotate = require('gulp-ng-annotate')
var base = 'app';
// var minifyCss = require('gulp-minify-css');
var paths = require("./gulp/paths");
//remove temporary directories like dist
gulp.task('clean', function() {
return gulp.src('assets/dist', {read: false})
.pipe(clean());
});
// combines all js files into one and create sourcemaps for them
gulp.task('scripts', function(done) {
gulp.src(paths.js)
.pipe(sourceMaps.init())
.pipe(concat('app.min.js'))
.pipe(ngAnnotate())
.pipe(uglify().on('error', util.log))
.pipe(sourceMaps.write('.'))
.pipe(gulp.dest(paths.dest))
.on('error', util.log)
.on('end', done);
});
gulp.task('copy', function() {
var files = ['bower_components/angular/angular.min.js'];
return gulp.src(files)
.pipe(expect(files))
});
gulp.task('watch', function() {
gulp.watch(paths.js, ['scripts'])
});
gulp.task('scripts:vendor', function() {
return gulp.src(paths.vendor_js)
// .pipe(concat(paths.vendor_js[0]))
.pipe(concat('vendor.min.js'))
.pipe(uglify().on('error', util.log))
.pipe(gulp.dest(paths.dest));
});
gulp.task('serve', function() {
})
gulp.task('default', function() {
console.log("running gulp");
});
gulp/Paths.js:
module.exports = {
dest: 'assets/dist',
js: [
'app/app.module.js',
'app/app.run.js',
'app/shared/**/*.module.js',
'app/shared/**/*.js',
'app/components/**/*.js',
'app/components/**/*.module.js'
],
sass: ['app/shared/**/*.sass'],
vendor_js: [
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.min.js',
'bower_components/**/*.min.js',
'assets/lib/svg-assets-cache/svg-assets-cache.js',
'assets/lib/alertifyjs/build/alertify.min.js',
'assets/lib/Recaptcha/googleRecaptchaAPI.js',
'assets/lib/angular-screenfull/angular-screenfull.min.js',
'assets/lib/screenfull/screenfull.min.js',
'assets/lib/angular-selectize/angular-selectize.js'
],
vendor_styles: [
'bower_components/selectize/dist/css/selectize.css',
'bower_components/font-awesome/css/font-awesome.min.css',
'assets/lib/alertifyjs/build/css/alertify.css',
'assets/lib/alertifyjs/build/css/themes/semantic.min.css',
'bower_components/vex/css/vex.css',
'bower_components/vex/css/vex-theme-flat-attack.css',
'assets/lib/material-charts/material-charts.min.css'
]
};
index.html:
<!DOCTYPE html>
<html lang="en" class="html_container">
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
<meta name="viewport" content="width=1200">
<title>Ng-Forum</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/lib/alertifyjs/build/css/alertify.css" />
<link rel="stylesheet" href="assets/lib/alertifyjs/build/css/themes/semantic.min.css" />
<link rel="stylesheet" href="bower_components/vex/css/vex.css" />
<link rel="stylesheet" href="bower_components/vex/css/vex-theme-flat-attack.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/amanuel2/MathGame/master/chartjs/material-charts.min.css" type="text/css" />
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<link rel="icon" href="favicon.ico">
</head>
<body ng-app="ForumApp">
<div ui-view></div>
<!--<script type="text/javascript" src="https://code.angularjs.org/1.4.9/angular.js"></script>-->
<script type="text/javscript" src="assets/dist/vendor.min.js"></script>
<script type="text/javascript" src="assets/dist/app.min.js"></script>
</body>
</html>
Help would be greatly appreciated here! Btw im working it on Cloud9IDE So if we could fix it there, it would be quick and fantastic! https://ide.c9.io/amanuel2/ng-fourm
The reason was that i mispelled javascript:
<script type="text/javscript" src="assets/dist/vendor.min.js"></script>
It was preety hard to find because, something that simple can completely throw you off!

Mochai Chai test not running

I'm learning app testing at the moment, using this course: https://code.tutsplus.com/courses/angularjs-for-test-driven-development/
I'm on lesson 2.3 where we have Mocha and Chai installed, a test folder with main.spec.js setup and gulp task setup to serve the app and tests.
When he updated his main.spec.js file with this simple describe statement:
describe('The Address Book App', function() {
it ('should work', function() {
chai.assert.isArray([]);
});
});
It ran fine for him:
However here is my setup:
test/main.spec.js
describe('The Dashboard app', function() {
it ('should work', function() {
chai.assert.isArray([]);
});
});
Basic markup:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mocha Spec Runner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="../app/favicon.ico">
<link rel="apple-touch-icon" href="../app/assets/imgs/apple-touch-icon.png">
<link href="testing.css" rel="stylesheet">
</head>
<body>
<div id="mocha"></div>
<script src="../bower_components/mocha/mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src="../bower_components/chai/chai.js"></script>
<script>
mocha.run();
</script>
<script src="main.spec.js"></script>
</body>
</html>
However my test file isn't displaying my first test:
Gulpfile setup, same as the authors, cept PORT numbers are different:
gulp.task('serve', function() {
browserSync.init({
notify : false,
port : 3333,
server: {
baseDir: ['app'],
routes: {
'/bower_components' : 'bower_components'
}
}
});
});
gulp.task('serve-test', function() {
browserSync.init({
notify : false,
port : 4444,
server: {
baseDir: ['test', 'app'],
routes: {
'/bower_components' : 'bower_components'
}
}
});
});
Any idea why my first basic test isn't running?
Everything looks right except the ordering.
Just swap the
<script>
mocha.run();
</script>
with
<script src="main.spec.js"></script>
You want to run mocha at the end when all your specs and setup is done.

Categories

Resources