Force angular cli gz generation - css

I'm trying to get a dist folder populated with the standard files + the .gz version of them. I did ng eject to get the webpack.config.js file so I could add the compression plugin https://github.com/webpack-contrib/compression-webpack-plugin. I added the new CompressPlugin({}) as the last plugin and marked the ejected: false in the .angular-cli.json file.
When I then run ng build I don't get any .gzip/.gz files generated which I would expect have.
Is there something I am missing or doing wrong? The full webpack file (mostly generated by ng new is:
const fs = require('fs');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');
const CompressionPlugin = require("compression-webpack-plugin");
const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin } = require('webpack');
const { NamedLazyChunksWebpackPlugin, BaseHrefWebpackPlugin } = require('#angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('#ngtools/webpack');
const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
const minimizeCss = false;
const baseHref = "";
const deployUrl = "";
const postcssPlugins = function () {
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /#preserve|#license|[##]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
autoprefixer: false,
safe: true,
mergeLonghand: false,
discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
};
return [
postcssUrl({
url: (URL) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/') || URL.startsWith('//')) {
return URL;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${URL}`;
}
else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
}
}),
autoprefixer(),
].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};
module.exports = {
"resolve": {
"extensions": [
".ts",
".js"
],
"modules": [
"./node_modules",
"./node_modules"
],
"symlinks": true
},
"resolveLoader": {
"modules": [
"./node_modules",
"./node_modules"
]
},
"entry": {
"main": [
"./src\\main.ts"
],
"polyfills": [
"./src\\polyfills.ts"
],
"styles": [
"./src\\styles.css"
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
},
"module": {
"rules": [
{
"enforce": "pre",
"test": /\.js$/,
"loader": "source-map-loader",
"exclude": [
/(\\|\/)node_modules(\\|\/)/
]
},
{
"test": /\.html$/,
"loader": "raw-loader"
},
{
"test": /\.(eot|svg|cur)$/,
"loader": "file-loader?name=[name].[hash:20].[ext]"
},
{
"test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
"loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "less-loader",
"options": {
"sourceMap": false
}
}
]
},
{
"include": [
path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "stylus-loader",
"options": {
"sourceMap": false,
"paths": []
}
}
]
},
{
"test": /\.ts$/,
"loader": "#ngtools/webpack"
}
]
},
"plugins": [
new NoEmitOnErrorsPlugin(),
new CopyWebpackPlugin([
{
"context": "src",
"to": "",
"from": {
"glob": "assets/**/*",
"dot": true
}
},
{
"context": "src",
"to": "",
"from": {
"glob": "favicon.ico",
"dot": true
}
}
], {
"ignore": [
".gitkeep"
],
"debug": "warning"
}),
new ProgressPlugin(),
new CircularDependencyPlugin({
"exclude": /(\\|\/)node_modules(\\|\/)/,
"failOnError": false
}),
new NamedLazyChunksWebpackPlugin(),
new HtmlWebpackPlugin({
"template": "./src\\index.html",
"filename": "./index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "Webpack App",
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
}),
new BaseHrefWebpackPlugin({}),
new CommonsChunkPlugin({
"name": [
"inline"
],
"minChunks": null
}),
new CommonsChunkPlugin({
"name": [
"vendor"
],
"minChunks": (module) => {
return module.resource
&& (module.resource.startsWith(nodeModules)
|| module.resource.startsWith(genDirNodeModules)
|| module.resource.startsWith(realNodeModules));
},
"chunks": [
"main"
]
}),
new SourceMapDevToolPlugin({
"filename": "[file].map[query]",
"moduleFilenameTemplate": "[resource-path]",
"fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
"sourceRoot": "webpack:///"
}),
new CommonsChunkPlugin({
"name": [
"main"
],
"minChunks": 2,
"async": "common"
}),
new NamedModulesPlugin({}),
new AotPlugin({
"mainPath": "main.ts",
"replaceExport": false,
"hostReplacementPaths": {
"environments\\environment.ts": "environments\\environment.ts"
},
"exclude": [],
"tsConfigPath": "src\\tsconfig.app.json",
"skipCodeGeneration": true
}),
new CompressionPlugin({})
],
"node": {
"fs": "empty",
"global": true,
"crypto": "empty",
"tls": "empty",
"net": "empty",
"process": true,
"module": false,
"clearImmediate": false,
"setImmediate": false
},
"devServer": {
"historyApiFallback": true
}
};
I'm using #angular/cli 1.4.4.
Note the main reason why I'm doing that is to improve some SEO recommendations because apparently my vendor.css is 600Kb big and being pointed out in the PageSpeed Ingishts: Your page has 1 blocking CSS resources. This causes a delay in rendering your page. It contains 3rd party css only - actually only bootstrap + font-awesome. Unless there is something else to prevent this I thought of compression. I also thought that the web server would auto compress and serve .gz files but I don't know whether that test would apply.
Any help is much appreciated! Thanks

Only ejected application's build is processed by exposed on the root webpack.config.js file. Application which is not ejected (or set to ejected: false) will completely ignore this webpack.config.js file.
So in order to use gzipped files you will need to work with ejected app and use new npm scripts automatically added to package.json.
Instead of 'ng build', now you should run:
npm run build
my related answers that may help:
Angular4 build - gzip missing
How to undo Angular 2 Cli ng-eject

Related

How to enable SWC Aliased imports in Next JS?

Upgrading from babel to SWC. I deleted the .babelrc file but now the path aliases are no longer recognized in my project. Tried to restore this with a .swrc
.swrc
{
"jsc": {
"target": "ES2017",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"]
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"lib": ["es6", "dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNEXT",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"],
}
},
"exclude": ["node_modules", "**/*.stories.tsx"],
"include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
}
14:24 Error: Unable to resolve path to module '#components/NavBar'
.eslintrc.json
{
"root": true,
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"#typescript-eslint", "react", "prettier"
],
"rules": {
"prefer-const": "off",
"import/extensions": "off",
"jsx-a11y/anchor-is-valid": "off",
"import/no-cycle": [0, { "ignoreExternal": true }],
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/prop-types": "off",
"react-hooks/exhaustive-deps": "off",
"react/no-unescaped-entities": "off",
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
"react/jsx-props-no-spreading": ["error", { "html": "ignore", "custom": "ignore", "exceptions": [""] }],
// needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": [
"error",
{ "functions": false, "classes": false, "variables": true }
],
"#typescript-eslint/ban-ts-comment": "off",
"#typescript-eslint/no-explicit-any": "off"
},
"settings": {
"import/resolver": {
"babel-module": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
old .babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"#components": "./components",
"#api": "./api",
"#models": "./models",
"#screens": "./screens",
"#hooks": "./hooks",
"#services": "./services",
"#constants": "./constants",
"#context": "./context",
"#queries": "./queries",
"#data": "./data",
"#typeDefs": "./types",
"#generated": "./generated",
"#utils": "./utils",
"#pages": "./pages",
"#public": "./public"
}
}
]
]
}
Was able to solve this with a few tweaks.
Remove the import/resolver section of .eslintrc.json
Extend next in eslint.

TailwindCSS is way too big with Angular build

When I use Tailwind to style an Angular application with a custom webpack, the styles.js chunk is huge after running ng build, coming in at around 30mb. This not only takes forever to build, but also slows down my web app.
After purging the Tailwind, the styles.js chunk is far smaller (~100kb), however 30mb just seems ridiculously big, even un-purged.
This even applies to a fresh application built with https://github.com/notiz-dev/ngx-tailwind, so I'm not sure what is causing the issue.
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
},
};
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngxTailwind": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"extraWebpackConfig": "webpack.config.js",
"outputPath": "dist/ngxTailwind",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"extraWebpackConfig": "webpack.config.js",
"browserTarget": "ngxTailwind:build"
},
"configurations": {
"production": {
"browserTarget": "ngxTailwind:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngxTailwind:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"extraWebpackConfig": "webpack.config.js",
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ngxTailwind:serve"
},
"configurations": {
"production": {
"devServerTarget": "ngxTailwind:serve:production"
}
}
}
}
}
},
"defaultProject": "ngxTailwind",
"cli": {
"analytics": "c9efd59e-9db9-4f26-9a6f-e35b477d8e5a"
}
}
styles.scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
Does anyone have any idea as to why it's so big? I understand it is not purged, but https://tailwindcss.com/docs/optimizing-for-production claims the uncompressed size is under 4mb, why am I getting nearly 7 times this?
Just change tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
//Other Code
};
then build: ng build --prod
Reference: Enabling manually

Webpack 4 - Minify CSS that was compiled from SCSS

Developing a wordpress site and using webpack to bundle assets.
I have a setup where I'm compiling SCSS to CSS among other things. I want to minify the output CSS and remove comments. I tried to add optimize-css-assets-webpack-plugin and configure it as example suggests, but it doesn't work (no errors)...
So how can I modify this webpack config so that output is (1) stripped of comments and (2) minified?
webpack.config.js:
const path = require("path");
const config = require('./config.js');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'production',
entry: ["./src/app.js", "./src/scss/style.scss"],
output: {
path: path.resolve(__dirname, "wp-content/themes/ezdigital"),
filename: "js/[name].js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
{
loader: "extract-loader"
},
{
loader: "css-loader?-url"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
//remove comments from JS files
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
},
}),
],
},
plugins: [
new BrowserSyncPlugin( {
proxy: config.url,
files: [
'**/*.php'
],
reloadDelay: 0
}
)
]
};
additional postss.config.js:
module.exports = {
plugins: {
'autoprefixer': {}
}
}
Package.json:
{
"name": "EZTheme",
"version": "1.0.0",
"description": "EZ Theme",
"main": "index.js",
"scripts": {
"test": "test",
"build": "webpack",
"start": "webpack --watch",
"serve": "webpack-dev-server --open"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": ""
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.6.3",
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^1.0.1",
"exports-loader": "^0.7.0",
"extract-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-alpha.0",
"file-loader": "^2.0.0",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"popper.js": "^1.14.6",
"postcss-cli": "^6.0.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"bootstrap": "^4.1.3"
}
}
It turns out the problem was that I was trying to use extract-text-webpack-plugin which does not work with webpack 4.
Instead, I switched to mini-css-extract-plugin along with optimize-css-assets-webpack-plugin.
My new webpack.config.js file:
const path = require("path");
const config = require('./config.js');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'production',
entry: ["./src/app.js", "./src/scss/style.scss"],
output: {
path: path.resolve(__dirname, "wp-content/themes/ezdigital"),
filename: "js/[name].js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
{
loader: "extract-loader"
},
{
loader: "css-loader?-url"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
//remove comments from JS files
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
}
})
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new BrowserSyncPlugin( {
proxy: config.url,
files: [
'**/*.php'
],
reloadDelay: 0
}
)
]
};

ng server is not outputing any css

I'm using #angular/cli when I execute ng server
the css code doesn't show up in anyway on the webpage.
This is the angular-cli.json
{
"project": {
"version": "1.0.0-beta.18",
"name": "botshop"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../vendor/font-awesome/css/font-awesome.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/metismenu/src/metisMenu.css",
"./assets/css/sb-admin-2.min.css",
"styles.css"
],
"scripts": [
"../systemjs.config.js",
"../node_modules/core-js/shim.js",
"../node_modules/zone.js/dist/zone.js",
"../node_modules/reflect-metadata/Reflect.js",
"../node_modules/systemjs/dist/system.src.js",
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/metismenu/src/metisMenu.js",
"./assets/js/sb-admin-2.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
I'm getting outputed .js files but not any css.
I have upgraded ng-cli to the latest version and I'm using the last nodejs LTS
Any ideas?

grunt-contrib-jade unable to read file (EISDIR)

Executing grunt jade:dev on this
grunt.initConfig({
"jade": {
"dev": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
},
"prod": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "prod"
}
}
}
}
});
fails with
Warning: Unable to read "src" file (Error code: EISDIR). Use --force to continue.
But executing grunt jade on this
grunt.initConfig({
"jade": {
"files": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true
},
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
}
});
succeeds.
There is no difference between the configuration of the tasks I'm running in both cases. What am I missing?
I don't know why, but this seems to work:
grunt.initConfig({
"jade": {
"dev": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true,
"options": {
"pretty": true,
"data": {
"environment": "dev"
}
}
},
"prod": {
"cwd": "src",
"src": ["**/*.jade"],
"dest": "dist",
"ext": ".html",
"expand": true,
"options": {
"pretty": true,
"data": {
"environment": "prod"
}
}
}
}
});
All I did was remove the enclosing "files" object.

Resources