I'm using gulp for a website using Bootstrap that I'm trying to set up. I'm able to successfully run gulp from the node.js command prompt:
gulp running from command line
But no stylesheets are applied to the webpage that loads:
screenshot of what loads
errors in console
I've already checked this post: Stylesheet not loaded because of MIME-type and can't find the answer to my problem in it.
This is my code structure:
code structure
This is my code:
index.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', gulp.series(function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream());
}));
// Move the javascript files into our /src/js folder
gulp.task('js', gulp.series(function() {
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest("src/js"))
.pipe(browserSync.stream());
}));
// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {
browserSync.init({
server: {
baseDir: "./"
},
port: 8080,
open: true,
notify: false
});
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
gulp.watch("src/*.html").on('change', browserSync.reload);
}));
gulp.task('default', gulp.series(['js','serve']))
running versions:
npm: 6.9.0
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-cli": "^2.2.0",
"gulp-sass": "^3.1.0"
},
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.15.0"
}
I have a feeling that the problem might be in gulpfile.js at the bottom here:
browserSync.init({
server: {
baseDir: "./"
},
port: 8080,
open: true,
notify: false
});
Also, I'm trying to follow https://www.youtube.com/watch?v=hnCmSXCZEpU&t=766s for getting bootstrap started and I know that a lot of people from the tutorial have had trouble with this part. Maybe this post can help them too..
EDIT 1
I tried using gulp serve, nothing changed. Here's a link to the edited gulpfile.js
Edited gulpfile.js
This is what npmjs.com says about gulp serve:
enter image description here
I've included video.js 5.16.0 and videojs-record 1.6.0 in my Bower.json, the resulting JavaScript code gets injected in the following index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>SelectPOP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<meta name="description" content="Architecture">
<meta name="keywords" content="">
<meta name="author" content="Sombra">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- inject:fonts:css --><!-- endinject -->
<!-- inject:vendor-styles:css --><link rel="stylesheet" href="../css/vendor-93729a7ec8.css"><!-- endinject -->
<!-- inject:app-styles:css --><link rel="stylesheet" href="../css/main-53180137c4.css"><!-- endinject -->
<!-- uncomment if using your own iconfont -->
<!-- <link rel="stylesheet" href="styles/own-icons.css"> -->
</head>
<body ng-app="selectPopApp" ng-strict-di>
<header>
<header-component></header-component>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12 main-content" ui-view>
</div>
</div>
</div>
</body>
<!-- inject:vendor:js --><script src="../js/vendor-ef1f3e9bbb.js"></script><!-- endinject -->
<!-- inject:app:js --><script src="../js/app-d9c3c6c010.module.js"></script><!-- endinject -->
<!-- inject:scripts:js --><script src="../js/scripts-be58dca5c9.js"></script><!-- endinject -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src=https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js></script>
</html>
I run the app using Spring-boot, but when I use it in Chrome I get an "Uncaught Syntax Error: Unexpected identifier". The JavaScript that causes the issue is:
import log from './utils/log';
import formatTime from './utils/format-time';
import pluginDefaultOptions from './defaults';
import window from 'global/window';
import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
I tried inserting type="module" into html as suggested in this Q&A, then Chrome stops complaining about the first import-from and gets an error at the "import window from 'global/window' line
Gulp.js used is the following:
(function () {
'use strict';
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var del = require('del');
var express = require('express');
var open = require('open');
var stylish = require('jshint-stylish');
var streamqueue = require('streamqueue');
var runSequence = require('run-sequence');
var merge = require('merge-stream');
var ripple = require('ripple-emulator');
var wiredep = require('wiredep');
var rigger = require('gulp-rigger');
var deletefile = require('gulp-delete-file');
var inject = require('gulp-inject');
var path = {
build: {
html: {
views: 'dist/pages/views/',
components: 'dist/pages/components',
directives: 'dist/pages/directives'
},
js: 'dist/js/',
css: 'dist/css/',
img: 'dist/images/',
fonts: 'dist/fonts/',
icons: 'dist/icons/'
},
src: {
js: 'app/**/*.js',
styles: {
common: 'app/styles/**/*.scss',
views: 'app/views/**/*.scss',
components: 'app/components/**/**/*.scss',
directives: 'app/directives/**/**/*.scss'
},
html: {
views: 'app/views/**/*.html',
components: 'app/components/**/**/*.html',
directives: 'app/directives/**/**/*.html'
},
assets: {
css: 'app/assets/css/**/*.css',
img: 'app/assets/images/**/*.*',
fonts: 'app/assets/fonts/*.*',
icons: 'app/assets/icons/*.*'
}
},
dist: 'dist',
distStatic: '../resources/dist'
};
var resourcesPath = {
fontsScss: 'app/styles/_fonts.scss',
stylesMainSrc: 'app/styles/main.scss',
appModule: 'app/app.module.js',
indexSrc: 'app/index.html',
indexDist: 'dist/pages/index.html',
pagesFolder: '/pages/'
};
/*** Tasks ------------------------------------------------------------------------- ***/
/*** Maintenance ---------------------------------------------- ***/
gulp.task('clean', function (done) {
return del([path.dist], done);
});
gulp.task('clean-static', function (done) {
return del([path.distStatic], {force: true}, done);
});
gulp.task('delete-app-module', function () {
var dest = path.build.js + '*.js';
var regexp = /^app|scripts/;
return gulp.src(dest).pipe(deletefile({
reg: regexp,
deleteMatch: true
}))
});
gulp.task('delete-styles', function () {
var regexp = /^main|fonts/;
return gulp.src([path.build.css + '*.css']).pipe(deletefile({
reg: regexp,
deleteMatch: true
}));
});
/*** Assets --------------------------------------------------- ***/
gulp.task('images', function () {
return gulp.src(path.src.assets.img)
.pipe(gulp.dest(path.build.img));
});
gulp.task('icons', function () {
return gulp.src(path.src.assets.icons)
.pipe(gulp.dest(path.build.icons));
});
gulp.task('fonts', function () {
gulp.src('bower_components/font-awesome/fonts/**.*')
.pipe(gulp.dest(path.build.fonts));
return gulp.src([path.src.assets.fonts, 'bower_components/**/*.{ttf,woff,woff2,eof,svg}'])
.pipe(gulp.dest(path.build.fonts));
});
/*** App files --------------------------------------------------- ***/
gulp.task('styles', ['delete-styles'], function () {
var injectAppFiles = gulp.src(
[
path.src.styles.views,
path.src.styles.components,
path.src.styles.directives,
'!' + resourcesPath.stylesMainSrc
],
{read: false}
);
var injectAppOptions = {
transform: transformFilepath,
starttag: '// inject:app',
endtag: '// endinject',
addRootSlash: false
};
function transformFilepath(filepath) {
return '#import "' + filepath + '";';
}
gulp.src(resourcesPath.fontsScss)
.pipe(plugins.sass({style: 'expanded'}))
.pipe(plugins.rev())
.pipe(gulp.dest(path.build.css));
return gulp.src(resourcesPath.stylesMainSrc)
.pipe(inject(injectAppFiles, injectAppOptions))
.pipe(plugins.sass({style: 'expanded'}))
.pipe(plugins.autoprefixer('last 2 version', '>1%', 'ie 9'))
.pipe(plugins.stripCssComments())
.pipe(plugins.rev())
.pipe(gulp.dest(path.build.css));
});
gulp.task('scripts', ['delete-app-module'], function () {
var dest = path.build.js;
var scriptStream = gulp.src(['**/*.js', '!app.module.js'], {cwd: 'app'})
.pipe(plugins.changed(dest));
gulp.src(resourcesPath.appModule)
.pipe(plugins.rev())
.pipe(gulp.dest(dest));
return streamqueue({objectMode: true}, scriptStream)
.pipe(plugins.ngAnnotate())
.pipe(plugins.concat('scripts.js'))
.pipe(plugins.rev())
.pipe(gulp.dest(dest));
});
gulp.task('html', function () {
gulp.src(path.src.html.views)
.pipe(rigger())
.pipe(gulp.dest(path.build.html.views));
gulp.src(path.src.html.components)
.pipe(rigger())
.pipe(gulp.dest(path.build.html.components));
gulp.src(path.src.html.directives)
.pipe(rigger())
.pipe(gulp.dest(path.build.html.directives));
});
/*** Vendor ---------------------------------------------------- ***/
gulp.task('vendor-js', function () {
var vendorFiles = wiredep().js;
return gulp.src(vendorFiles)
.pipe(plugins.concat('vendor.js'))
.pipe(plugins.rev())
.pipe(gulp.dest(path.build.js));
});
gulp.task('vendor-css', function () {
var vendorStyle = wiredep().css;
return gulp.src(vendorStyle)
.pipe(plugins.concat('vendor.css'))
.pipe(plugins.rev())
.pipe(gulp.dest(path.build.css));
});
/*** Assemble tasks ------------------------------------------- ***/
gulp.task('injector', ['scripts', 'html', 'styles'], function () {
var _inject = function (src, tag) {
return plugins.inject(src, {
starttag: '<!-- inject:' + tag + ':{{ext}} -->',
addRootSlash: false,
ignorePath: path.dist,
addPrefix: '..'
});
};
return gulp.src(resourcesPath.indexSrc)
.pipe(_inject(gulp.src(path.build.css + '/fonts*.css'), 'fonts'))
.pipe(_inject(gulp.src(path.build.css + '/main*.css'), 'app-styles'))
.pipe(_inject(gulp.src(path.build.css + '/vendor*.css'), 'vendor-styles'))
.pipe(_inject(gulp.src(path.build.js + '/vendor*.js'), 'vendor'))
.pipe(_inject(gulp.src(path.build.js + '/app*.js'), 'app'))
.pipe(_inject(gulp.src(path.build.js + '/scripts*.js'), 'scripts'))
.pipe(gulp.dest(path.dist + resourcesPath.pagesFolder));
});
gulp.task('log-success', function () {
console.log('----------------- GULP BUILD SUCCESS --------------------');
});
gulp.task('watchers', function () {
gulp.watch(path.src.assets.css, ['styles', 'injector']);
gulp.watch(path.src.assets.fonts, ['fonts']);
gulp.watch(path.src.assets.img, ['images']);
gulp.watch(path.src.html.views, ['html', 'injector']);
gulp.watch(path.src.html.components, ['html', 'injector']);
gulp.watch(path.src.html.directives, ['html', 'injector']);
gulp.watch(path.src.styles.common, ['styles', 'injector']);
gulp.watch(path.src.styles.views, ['styles', 'injector']);
gulp.watch(path.src.styles.components, ['styles', 'injector']);
gulp.watch(path.src.styles.directives, ['styles', 'injector']);
gulp.watch(path.src.js, ['scripts', 'injector']);
gulp.watch(resourcesPath.indexSrc, ['html', 'injector']);
gulp.watch('bower.json', ['vendor-js', 'vendor-css']);
});
gulp.task('default', function (done) {
runSequence(
'clean',
'clean-static',
[
'fonts',
'images',
'vendor-js',
'vendor-css',
'styles',
'html',
'icons'
],
'injector',
'watchers',
'log-success',
done);
});
gulp.task('deploy', function (done) {
runSequence(
'clean',
'clean-static',
[
'fonts',
'images',
'vendor-js',
'vendor-css',
'styles',
'html',
'icons'
],
'injector',
done);
});
})();
how are you compiling this? Based on your syntax and the names of your compiled modules, I'm assuming you're using either Webpack, which means you're likely using Typescript (unless you meant to tag as AngularJS instead). In any case, ES6 import statements are the same, and the syntax you're using is for default exports only.
import can only be used in ES6 JS if type="module" is on the script tag.
So, unless you're setting default exports and relying on them, the syntax for importing explicit exports is:
import { exportedProperty1 } from 'module-name'
import { exportedThing1, exportedThing2 } from 'module-name'
import defaultExport from 'module-name'
import * as Name from 'module-name'
...where 'module-name' is a relative path to the file.
This syntax does not require type="module":
let myThing = import('module-name')
your issue with window from global/window is going to be specific to your bundler, your platform, your files, and your polyfills.
All the packages that contained es6 JavaScript had to be compiled individually using webpack, then changes had to be made to the "overrides" section of bower.json for the big project to include dist directories and generated min.js files of the compiled projects in order for gulp to inject them. E.g.
"overrides" {
"videojs-record": {
"main": [
"dist/videojs.record.min.js"
]
}
}
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>
I am trying to use VegasJS as a slider, and Bower o manage my packages, but I am not able to run the vegas using bower, and Vegas aren't working at all, I tried to use without bower too, but was not successfully. It only occurs in my localserver, because I rewrite the exact same code in Codepen, and it works perfectly.
I'm using Gulp too, don't know if it will make some difference.
My HTML code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Page Title</title>
<!-- CSS -->
<link rel="stylesheet" href="../bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="../bower_components/vegas/dist/vegas.min.css">
<link rel="stylesheet" href="../bower_components/owl.carousel/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="./css/style.css">
<!-- JavaScript -->
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../bower_components/vegas/dist/vegas.min.js"></script>
<script type="text/javascript" src="../bower_components/owl.carousel/dist/owl.carousel.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<header>
</header>
</body>
The CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
header {
height: 100vh;
background-color: crimson; }
The JavaScript code:
$("header").vegas({
slides: [
{ src: "https://unsplash.it/1000x1000?image=421" },
{ src: "https://unsplash.it/1000x1000?image=500" },
{ src: "https://unsplash.it/1000x1000?image=425" },
{ src: "https://unsplash.it/1000x1000?image=261" }
]
});
Gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('./public/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass())
.pipe(gulp.dest('./public/css'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', ['sass'], function() {
browserSync.init({
server: {
baseDir: "public",
routes: {
"/bower_components": "bower_components"
}
}
});
gulp.watch('./public/sass/**/*.scss', ['sass']);
gulp.watch('./public/*.html').on('change', browserSync.reload);
gulp.watch('./public/js/*.js').on('change', browserSync.reload);
});
gulp.task('autoprefixer', function() {
gulp.src('./public/css/style.css')
.pipe(autoprefixer({
"browserslist": [
"Chrome",
"Firefox",
"Explorer",
"Edge",
"iOS",
"Opera",
"Safari",
"ExplorerMobile",
"last 3 versions",
"> 1%"
],
cascade: false
}))
.pipe(gulp.dest('./public/css'))
});
gulp.task('watch', function() {
gulp.watch('./public/css/*.css', ['autoprefixer']);
});
gulp.task('default', ['sass', 'browser-sync', 'autoprefixer', 'watch']);
Everything seems to be working very well, with exception of Vegas, I don't know why in my localserver it aren't working.
In this case, I tested the Owl Carousel, and its working perfectly well, the only problem here, are the Vegas. I almost certainly the problem are on css link.
I tested in WebStorm and Atom IDE by the way.
Thanks for all the help, but I fixed it, what happens was, I commited the mistake of add the initialization without document ready property, the right way:
$(document).ready(function(){
$("header").vegas({
slides: [
{ src: "https://unsplash.it/1000x1000?image=421" },
{ src: "https://unsplash.it/1000x1000?image=500" },
{ src: "https://unsplash.it/1000x1000?image=425" },
{ src: "https://unsplash.it/1000x1000?image=261" }
]
});
});
I have pushed my angular 2 app on heroku but it takes too long to load.
is there a way to bundle everything up because right now i have this in my index.html
<html>
<head>
<base href="/">
<title>Angular 2 Arc</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ng2-app>Loading...</ng2-app>
<!-- Load Angular 2 Core libraries -->
<script src="es6-shim/es6-shim.min.js"></script>
<script src="systemjs/dist/system-polyfills.js"></script>
<script src="angular2/bundles/angular2-polyfills.js"></script>
<script src="systemjs/dist/system.src.js"></script>
<script src="rxjs/bundles/Rx.js"></script>
<script src="angular2/bundles/angular2.dev.js"></script>
<script src="angular2/bundles/router.dev.js"></script>
<script src="angular2/bundles/http.js"></script>
<!-- Load Bootstrap and Jquery -->
<script src="lib/jquery/jquery.min.js" charset="utf-8"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="assets/css/app.css">
<!-- Configure SystemJS -->
<script>
System.config({
defaultJSExtensions: true,
packages: {
boot: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('js/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
My setup is express server and system JS.
server.js
var express = require('express');
var bodyParser = require('body-parser')
var fs = require("fs");
// initialize express
var app = express();
// declare build and node_module paths
app.use(express.static("./build"));
app.use(express.static("./node_modules/"));
// parse request body
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
var body;
// route to send json data from angular 2
app.post('/export', function(req, res){
body = req.body;
res.json("Got the data!");
fs.writeFile('parameters.json', JSON.stringify({body}, null, 4), function (err) {
if (err) return console.log(err);
console.log('Data json file created!');
});
});
// start server
app.listen(process.env.PORT || "3001", function(){
console.log("Express server running on localhost:3001");
});
If its the free heroku tier its probably because its sleeping when you request it?
You can minify and concatenate your js files to decrease load times.
Here is a guide on how to do that with gulp tasks:
https://caveofcode.com/2016/03/gulp-tasks-for-minification-and-concatenation-of-dependencies-in-angularjs/