I installed yo webapp without bootstrap then added bootstrap 3 following this answer: https://stackoverflow.com/a/19034513/712005.
I can't get grunt to build my main.css and include bootstrap correctly. No style folder is created in the dist folder.
When running "grunt build" I get this message:
Running "cssmin:generated" (cssmin)
task Destination not written because minified CSS was empty.
but no errors.
My gruntfile includes this:
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: '<%= yeoman.app %>/index.html'
},
usemin: {
options: {
assetsDirs: ['<%= yeoman.dist %>']
},
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
}
and this:
grunt.loadNpmTasks('grunt-bower-install');
index.html includes:
<!-- build:css(.tmp,app) styles/main.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp,app) styles/bootstrap.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
References I included to the location of main.css and bootstrap.css in the app-folder were removed during build.
bower.json includes:
{
"name": "gabriel",
"version": "0.0.1",
"dependencies": {
"bootstrap": "~3.0.2",
"jquery": "~2.0.3",
"modernizr": "~2.7.0"
},
"devDependencies": {}
}
What am I missing?
As stated in the link follow the same steps. That should work for you. I just did and works fine for me.
In summary.
yo angular - Say 'No' to Bootstrap here
bower install --save bootstrap
npm install --save-dev grunt-bower-install
edit Gruntfile.js - Do as what exactly says
edit app/index.html - Add only below lines
<!-- bower:css -->
<!-- endbower -->
<!-- bower:js -->
<!-- endbower -->
grunt bower-install
run grunt server or grunt build
The reason why the following error is showing is that
Running "cssmin:generated" (cssmin) task >> Destination not written because minified CSS was empty.
the place where bootstrap css file should be placed might be missplaced, so the correct position to place bootstrap css file is as follow -
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
I hope this would help, folks...
Related
I keep getting the same error. I have not touched Webpacker for the past 5 builds, and suddenly getting errors for a small change in some simple code. Really starting to baffle me.
I seem to be getting a space in the word 'loader', on the 'ERROR in Error line (4). I feel that is the cause.
Here is the output error:
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
ERROR in Error: The loader "/usr/src/app/client/node_modules/html-webpack-plugin/lib/lo ader.js!/usr/src/app/client/public/index.html" didn't return html.
- index.js:330 HtmlWebpackPlugin.evaluateCompilationResult
[client]/[html-webpack-plugin]/index.js:330:24
- index.js:237
[client]/[html-webpack-plugin]/index.js:237:22
- runMicrotasks
- task_queues.js:93 processTicksAndRejections
internal/process/task_queues.js:93:5
- async Promise.all
- async Promise.all
webpack 5.22.0 compiled with 1 error and 3 warnings in 38437 ms
Webpack Configuration:
const path = require("path");
const webpack = require('webpack');
const dotenv = require('dotenv');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = function(_env, argv) {
const isProduction = argv.mode === "production";
const isDevelopment = !isProduction;
return {
devtool: isDevelopment && "cheap-module-source-map",
entry: "./src/index.js",
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
},
{
test: /\.(woff(2)?|png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
]
},
plugins: [new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
})],
};
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TBNHVKT');</script>
<!-- End Google Tag Manager -->
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<script src="https://js.stripe.com/v3/"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>CarXpert</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TBNHVKT"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Just got the same error, even though everything was locked down with package-lock.json files, and was building successfully 2 days ago.
Updating html-webpack-plugin and webpack helped:
npm install webpack#latest
npm install html-webpack-plugin#latest
In order to prepare my app for production I use the below gulp task. The task is quiet self explanatory, all .js files are uglified and placed into build folder
var jsLibFilter = $.filter('**/lib.js');
var jsAppFilter = $.filter('**/app.js');
var buildPath = './build/';
gulp.task('build', function() {
return gulp.src(config.index)
<!-- pick up all files in index which are under "lib.js" tag -->
.pipe(jsLibFilter)
.pipe($.uglify())
.pipe(jsLibFilter.restore())
<!-- pick up all files in index which are under "app.js" tag -->
.pipe(jsAppFilter)
.pipe($.ngAnnotate())
.pipe($.uglify())
.pipe(jsAppFilter.restore())
.pipe(gulp.dest(buildPath));
});
There is a whole bunch of other things that happen within the upper task which I have not included for sake of clarity.
A small snapshot of index.html below:
<body>
<!-- build:js js/lib.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
...other libraries here
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/app.js -->
<!-- inject:js -->
<script src="/client/app/app.module.js"></script>
<script src="/client/app/history/historyController.js"></script>
..other source code files here
<!-- endinject -->
<!-- endbuild -->
</body>
I have two specific questions:
How to incorporate ES6 during development. e.g. how do I apply babel transpiler while developing.
Do keep in mind that during development I am serving files from the "/app" folder
How to incorporate ES6 during production
During production the files are served from build folder for which I have provided the build task above.
I have the following directory structure:
bower_components
node_modules
src
index.html
bower.json
package.json
gulpfile.js
.gitignore
I have a gulp task to inject the bower dependencies as follows :
gulp.task('bower-inject', function () {
gulp.src('./index.html')
.pipe(wiredep())
.pipe(gulp.dest('./'));
});
index.html
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="src/assets/images/favicon.ico">
<title>ABC</title>
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- this is done with gulp inject which works as expected -->
<!-- endinject -->
</head>
<body ng-controller="AppController as appVm">
<div ui-view></div>
<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- done via gulp-inject and works as expected -->
<!-- endinject -->
</body>
bower.json
"devDependencies": {
"angular": "1.4.0",
"angular-bootstrap": "~0.13.0",
"angular-ui-router": "~0.2.15",
"bootstrap": "~3.3.4",
"modernizr": "~2.8.3",
"font-awesome": "~4.3.0"
}
This is what I see when I run the task :
[00:24:50] Starting 'bower-inject'...
[00:24:50] Finished 'bower-inject' after 14 ms
Any idea what I am missing here?
This is what finally worked for me:
gulp.task('inject', function () {
var target = gulp.src('./index.html');
var sources = gulp.src(['src/**/*.js', 'src/**/*.css'], {read: false});
return target
.pipe(wiredep({
devDependencies: true
}))
.pipe(inject(sources))
.pipe(gulp.dest('./'));
});
Wiredep will inject script tags when you install your packages as dependencies, not dev-dependencies.
So runing bower install --save angular angular-bootstrap angular-ui-router bootstrap modernizr font-awesome and then running your gulp build should do it.
Note: some packages need overrides configuration on bower.json. Check here for information on bower overrides if you need.
I have a firebase-hosted app that is working, and now I'm trying to integrate Semantic-UI so that when I deploy it to firebase it will have all the Semantic icons and styles. The icons and styles are not making it over somehow, and they show up just fine on my local "grunt serve."
I have semantic.js referenced and integrated into vendor.js, and I have semantic.css referenced in the header and integrated into the vendor.css during the build. It seems I'm overthinking how to get my icons and styles up on firebase. Thoughts?
My dist folder for my grunt build is in [root folder]/dist and the dist folder for Semantic-UI is in [root folder]/bower_components/semantic-ui/dist.
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/semantic-ui/dist/semantic.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="devNews">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ng-include="'views/nav.html'"></div>
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/mockfirebase/dist/mockfirebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.min.js"></script>
<script src="bower_components/semantic-ui/dist/semantic.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/posts.js"></script>
<script src="scripts/services/post.js"></script>
<script src="scripts/services/authorization.js"></script>
<script src="scripts/services/profile.js"></script>
<script src="scripts/controllers/profile.js"></script>
<script src="scripts/controllers/postview.js"></script>
<script src="scripts/controllers/nav.js"></script>
<script src="scripts/controllers/authorization.js"></script>
<script src="scripts/filters/url.js"></script>
<!-- endbuild -->
</body>
</html>
I had to first add the following to my Gruntfile.js. Since I'm not using Bootstrap any longer, I just replaced it with some Semantic-UI directory settings:
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{webp}',
'fonts/*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: 'bower_components/semantic-ui/dist',
src: 'themes/**/*',
dest: '<%= yeoman.dist %>'
}, {
expand: true,
cwd: 'bower_components/semantic-ui/dist',
src: 'components/*',
dest: '<%= yeoman.dist %>'
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
Then I had to reference the CDN for my icons, adding them to my semantic.css.
#font-face {
font-family: 'Icons';
src: url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.eot");
}
etc. for each icon type.
I have one AngularJS project using yeoman, grunt and bower. It is working fine. I am using one of WrapBootstrap themes with the application. So I don't need the default JQuery and Bootstrap from AngularJS.
In my index.html page, I have the following to include CSS styles.
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<link href="styles/pagestyle.css" media="all" rel="stylesheet"
type="text/css" />
<!-- / bootstrap [required] -->
<link href="assets/stylesheets/bootstrap/bootstrap.css" media="all"
rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="assets/stylesheets/jquery/jquery_ui.css" media="all"
rel="stylesheet" type="text/css" />
<link href="assets/stylesheets/light-theme.css" media="all"
id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="assets/stylesheets/theme-colors.css" media="all"
rel="stylesheet" type="text/css" />
I am not including any CSS from bower_components directory.
But when I do grunt serve:dist, it is adding bootstrap.css from bower_components/dist directory to the buld:css part. I don't want to add that. So I removed JQuery and bootstrap dependency from bower.json file. This is my bower.json file now
{
"name": "app-web-client",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.15",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"angular-resource": "1.2.15",
"angular-cookies": "1.2.15",
"angular-sanitize": "1.2.15",
"angular-bootstrap": "0.11.0",
"angular-route": "1.2.15"
},
"devDependencies": {
"angular-mocks": "1.2.15",
"angular-scenario": "1.2.15"
}
}
Then I tried doing grunt serve:dist. and I removed build:css block and was working fine.
But when I tried adding all those assets css styles inside build:css block, and doing a grunt dist, all the styles are gone and the block becomes empty. It will be only this much,
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
And when opening in browser no styles are applied because its empty.
How to avoid this? I tried adding some other css inside that block. But it is replacing with empty block, and giving me this error. How to remove vendor.css from index.html. I tried
The build:css block is actually a directive for Grunt to follow. Remove these four lines from your index.html:
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
And re-run grunt. You should no longer have a reference to vendor.css in your index.html.