I have a grunt task configured (I am working existing project). I am not sure where to find particular task. I have an "index.html" file getting created and added to the "dist" folder after every compile and build. But in the index.html i manually have to add the following every time:
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
and also the -
<base href="/">
For AJS.
What might be the possible issue?
I don't want to edit bower.json instead do it using grunt task. so how do i do it?
I have the following:
var buildConfig = module.exports = {
// Wiredep options
wiredepOptions: {
//
// devDependencies: true, // <-- injects bower devDependencies
//
// exclude: [ // <-- List of patterns to exclude
//
// /bootstrap\.js/
// ]
"overrides": {
"bootstrap": {
"main": [
"dist/css/bootstrap.css"
]
}
},
This gives me error. how do i resolve it?
This is because the main object in Bootstrap's bower.json mention a reference to the less file not the css
"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
],
Wiredep is the grunt task that is responsible for injecting those assets so it have no idea where the CSS file is. You can do it by providing an override in wiredep task in your gruntfile.js as follow:
wiredep: {
...,
overrides: {
'bootstrap': {
'main': [
'dist/js/bootstrap.js',
'dist/css/bootstrap.css' // Note this
]
}
}
}
},
Running grunt wiredep again will inject the CSS file to your HTML as expected.
Note: This won't work unless your HTML have this HTML comment
<!-- bower:css -->
The styles will be injected here
<!-- endbower -->
I could not resolve it with editing Gruntfile but added this in bower.json :
"overrides": {
"bootstrap": {
"main": [
"dist/css/bootstrap.css"
]
}
Related
I am using grunt to transpiling react jsx files and it's perfectly works as expected by using grunt-babel along with presets: ["env", "react"],plugins: ["transform-es2015-modules-amd"]
The problem I have is,grunt-babel transpiling JSX files which are placed in a same directory but I need to transpile JSX files which are one level up to root folder directory.Below is the detail explanation:
Folder Structure :
ReactApp
- App // grunt-babel and relevant plug-ins, presets installed here
- config
- node_modules
- JSX // it's transpiling and working
- test.jsx
- JSX_generated
- test.js
- gruntfile
- package
- JSX // jsx file source and it's not transpiling
- test.jsx
- JSX_generated // transpiled jsx file output expected
- test.js
- App.js
- index.html
gruntfile :
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
babel: {
options: {
sourceMap: false,
presets: ["env", "react"],
plugins: ["transform-es2015-modules-amd"]
},
dist: {
files: [{
expand: true,
cwd: './JSX',
src: ['*.jsx'],
dest: './JSX_generated',
ext: '.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-babel');
grunt.registerTask('default', ['babel']);};
Above grunt config is woring fine for the jsx folder placed under App folder, the thing is I need to transpile the JSX folder which is placed out of App folder.
Changed grunt config cwd as cwd: './../JSX' , dest as dest: './../JSX_generated',
Getting the following error :
Running "babel:jsx" (babel) task
Warning: Unknown plugin "transform-es2015-modules-amd" specified in "base" at 0, attempted to resolve relative to "../JSX"
sample jsx file :
import React from 'react';
import AppData from './AppData';
import Loader from './Loader';
class Test extends React.Component {
render() {
return <p>hello </p>
}
}
ReactDOM.render(<Test />, document.getElementById('container'));
Is there a way to transpile files one level up from the grunt or node have been installed ?
For anyone having an issue like this, the solution is use
absolute paths
../Users/app/node_modules/babel-preset-es2015
or use require like below :
var babelenv = require('babel-preset-env');
var babelreact = require('babel-preset-react');
var babelamd = require('babel-plugin-transform-es2015-modules-amd');
and presets: [ babelenv, babelreact],plugins : [ babelamd ]
I am about to move angular 1 + typescript project build setup from gulp to webpack, the only part I am stuck with is, how to bundle node_modules js file in proper sequence.
I was till now using bower for client side dependencies, and gulp has wiredep plugin which will look into bower dependencies section + main section to build the dependency order and get it to bundle it properly.
Now I understand that webpack philosophy is different, we should depend upload whatever is imported rather than any dependencies section as such.
so to get it to work I will need to do: move all dependencies from bower.json to package.json
currently as I am using typings, tsc considers the typings and gives me the output, I really don't need to write imports for bower packages as such.
So if i understand correctly, to get it work with webpack,
a) I should get away with typings and then directly import the js
files inside all my ts files??
As I understand, all the js modules from npm do work with modules, so does webpack really needs typings files?
OR
b) I should write a separate vendor.ts, where I should maintain the
sequence of imports (for js and css) myself,
but then that would be little painful to do (given I am used to wiredep handling it for me).
But then this will allow me bundle the vendor files separately using chunks-plugin
OR
c) is there any other standard way to handle this.
This is kinda pain point to move angular 1 from gulp to webpack.
When you import a module from a TypeScript file that's going to be loaded by webpack, it'll get it's content from node_modules and bundle it into the output file.
index.ts
import * as angular from "angular";
const myApp = angular.module("myApp", []);
myApp.controller("MyController", function PhoneListController($scope) {
$scope.phones = [
{
name: "Nexus S",
snippet: "Fast just got faster with Nexus S."
}, {
name: "Motorola XOOM™ with Wi-Fi",
snippet: "The Next, Next Generation tablet."
}, {
name: "MOTOROLA XOOM™",
snippet: "The Next, Next Generation tablet."
}
];
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
...
<script src="bundle.js"></script>
</head>
<body ng-controller="MyController">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
webpack.config.js
module.exports = {
entry: "./index.ts",
output: {
filename: "./bundle.js"
},
devtool: "source-map",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: "ts-loader" }
],
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
]
}
};
Add angular, #types/angular, ts-loader, source-map-loader, typescript to your packages.json and run webpack.
It'll bundle everything inside a single file named bundle.js which will be used by your index.html.
I have a problem where react-sortable-mixin is not respecting the browserify-shim global:Sortable declaration in my package.json file thus causing the Sortable module to be packaged up in my bundle. I have run into a similar problem with other modules so it may very well be a config problem on my part. I have created a small test package that simply requires React and react-sortbable-mixin in order to demonstrate the problem:
package.json
{
"name": "test",
"version": "1.0.0",
"description": "Just a test",
"main": "index.js",
"dependencies": {
"react": "^0.14.8",
"sortablejs": "^1.4.2"
},
"devDependencies": {
"browserify-shim": "^3.8.12"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"react": "global:React",
"sortablejs": "global:Sortable",
"sortablejs/react-sortable-mixin": {
"depends": "sortablejs:Sortable"
}
}
}
index.js
"use strict";
var React = require('react');
var SortableMixin = require('sortablejs/react-sortable-mixin');
react-sortable-mixin.js (Just the first part of the module...)
(function (factory) {
'use strict';
if (typeof module != 'undefined' && typeof module.exports != 'undefined') {
module.exports = factory(require('./Sortable'));
}
else if (typeof define === 'function' && define.amd) {
define(['./Sortable'], factory);
}
else {
/* jshint sub:true */
window['SortableMixin'] = factory(Sortable);
}
})(function (/** Sortable */Sortable) { ...
Here is the diagnostic output from browserify:
% BROWSERIFYSHIM_DIAGNOSTICS=1 browserify index.js -t browserify-shim -o bundle.js
{ file: '/home/jlafosse/test/index.js',
info:
{ package_json: '/home/jlafosse/test/package.json',
packageDir: '/home/jlafosse/test',
shim: undefined,
exposeGlobals: { react: 'React', sortablejs: 'Sortable' },
browser: undefined,
'browserify-shim':
{ react: 'global:React',
sortablejs: 'global:Sortable',
'sortablejs/react-sortable-mixin': { depends: 'sortablejs:Sortable' } },
dependencies: { react: '^0.14.8', sortablejs: '^1.4.2' } },
messages:
[ 'Resolved "sortablejs/react-sortable-mixin" found in package.json to "/home/jlafosse/test/sortablejs/react-sortable-mixin"',
'Found depends "sortablejs" as an installed dependency of the package',
{ resolved:
{ '/home/jlafosse/test/sortablejs/react-sortable-mixin':
{ exports: null,
depends: { sortablejs: 'Sortable' } } } } ] }
{ file: '/home/jlafosse/test/index.js',
info:
{ package_json: '/home/jlafosse/test/package.json',
packageDir: '/home/jlafosse/test',
resolvedPreviously: true,
shim: undefined,
exposeGlobals: { react: 'React', sortablejs: 'Sortable' },
browser: undefined,
'browserify-shim':
{ react: 'global:React',
sortablejs: 'global:Sortable',
'sortablejs/react-sortable-mixin': { depends: 'sortablejs:Sortable' } },
dependencies: { react: '^0.14.8', sortablejs: '^1.4.2' } },
messages: [] }
I know the global shimming works because React is not included in the bundle... however as mentioned above, Sortable is being included. Also if I simply require('sortablejs') instead of the sortablejs/react-sortable-mixin in my index.js file, Sortable WILL NOT be included in the bundle as expected so my thought is that either my config is wrong or the module format for react-sortable-mixin does not respect browserify-shim.
Any help is appreciated.
This isn't possible without modifying the contents of the Sortable library. Browserify Shim alters your bundle.js file to either include window.PackageName or the entire package, depending on the browserify-shim directive in your package.json.
In your situation, when you require('sortablejs/react-sortable-mixin'); you're expecting Browserify Shim to alter the contents of node_modules/sortablejs/react-sortable-mixin.js such that require('./Sortable') becomes window.Sortable inside that file. The problem is that Browserify Shim doesn't alter the contents of the node_modules directory so this isn't possible.
There are a couple options:
Rather than loading Sortable via CDN, load it globally via your bundle.js script to ensure it is only loaded once. Your index.js would change to:
window.Sortable = require('sortablejs');
var SortableMixin = require('sortablejs/react-sortable-mixin');
Fork your own standalone file for react-sortable-mixin.js and bundle this directly in your bundle so that Browserify Shim can act on it.
I'm using wiredep to automatically include ckeditor and ng-file-upload to my index template and karma.conf.js.
My project is bootstrapped by jhipster.
For ckeditor package, I have to include two files, ckeditor.js and ckeditor-angularjs.js, but wiredep won't copy these files... (i don't have these files into my index.html and my karma.conf.js).
in my bower.json, i have this declaration (after doing bower install ckeditor-angularjs --save):
"dependencies": {
"ckeditor-angularjs": "*"
}
My Gruntfile.js :
wiredep: {
app: {
src: ['src/main/webapp/index.html'],
exclude: [
/angular-i18n/ // localizations are loaded dynamically
]
},
test: {
src: 'src/test/javascript/karma.conf.js',
exclude: [/angular-i18n/, /angular-scenario/],
ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected javascripts
devDependencies: true,
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
}
i tested with overrides option in bower.json but it wont work... :
"overrides": {
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css",
"less/bootstrap.less"
]
},
"ckeditor-angularjs": {
"main": [
"./src/main/webapp/bower_components/ckeditor/ckeditor.js",
"build/ckeditor-angularjs.min.js"
]
},
"ng-file-upload": {
"main": "ng-file-upload-all.js"
}
}
when I do this : grunt wiredep, I have this error :
Warning: Maximum call stack size exceeded Use --force to continue. Aborted due to warnings.
with --force -v param :
Warning: Error: angular is not installed. Try running `bower install`. Used --force, continuing.
Done, but with warnings.
I don't think that angular package is the problem...
Do you know how can I solve this ?
Thanks.
I can't make karma-ng-html2js-preprocessor working for external template.
Package Json file:
.....
"gulp-karma": "*",
"karma-coverage": "*",
"karma-jasmine": "*",
"karma-ng-html2js-preprocessor": "*",
"karma-phantomjs-launcher": "*",
.....
Karma config file:
config.set({
browsers: [
....
],
frameworks: [
'jasmine'
],
plugins: [
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'app/**/*.html': 'ng-html2js'
},
ngHtml2JsPreprocessor: {
stripPrefix: 'app/'
}
});
Files are defined in Build file and passed to gulp-karma. Here are the defined files:
config = { test: {
configFile: '.../karma.conf.js',
depends: [
.......
],
files: [
"app/**/*.js",
'app/**/*.html'
]
}
}
Loading template in my directive spec like below:
beforeEach(module('app'));
beforeEach(module('app/tem/mytemp.html'));
I am getting the error below:
Error: [$injector:modulerr] Failed to instantiate module app/tem/mytemp.html due to:
Error: [$injector:nomod] Module 'app/tem/mytemp.html' is not available! You either misspelled the
In karma debug.html html files are loaded in link tag output:
<script type="text/javascript" src="/absoluteC:.../app/tem/comp/mydirective.js"></script>
<link href="/absoluteC:..../app/tem/mytemp.html" rel="import">
<script type="text/javascript">
window.__karma__.loaded();
Am I missing anything? How do I debug and move forward from this issue?
Here is how I solved the exact same problem:
1) npm install karma-ng-html2js-preprocessor --save-dev (you have already done that)
2) In karma.config.js:
// ....
preprocessors: {
'**/*.html': ['ng-html2js']
},
// ....
ngHtml2JsPreprocessor: {
stripPrefix: 'app/', // <-- change as needed for the project
// include beforeEach(module('templates')) in unit tests
moduleName: 'templates'
},
plugins : [
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor'
]
3) Since gulp-karma overwrites the files property of the karma.conf.js, change the gulp task config for your test setup(s) (I had two: one test that runs the tests once and another called tdd for continuous testing) to something like this:
gulp.task('test', function() {
var bowerDeps = ...
var testFiles = bowerDeps.js.concat([
'app/scripts/**/*.js',
'test/unit/**/*.js',
'app/**/*.html' // <-- This is what you need to add to load the .html files
]);
return gulp.src(testFiles)
.pipe($.karma({
configFile: 'test/karma.conf.js',
action: 'run'
}))
....
});
Hope this will help someone.
I am new to this as well and I'm googling around for another problem but I think I'm a little further along than you are (I also realize this quest is a little old).
What I did was to make the following change to the ngHtml2JsPreprocessor section of the Karma config file
ngHtml2JsPreprocessor: {
stripPrefix: 'app/',
// ADDED THIS: the name of the Angular module to create
moduleName: "my.templates"
}
Then in my test I referenced that module name instead of the HTML name.
beforeEach(module('my.templates'));
I hope that helps even if it's late. Or that someone else finds the information useful as they are searching around.