React Native app closes after installing Pushwoosh package - firebase

I tested the package in a clean app and it works fine, however when I try to add pushwoosh-react-native-plugin to an existing app, it closes on start and never fire an error in Firebase Crash Reporting.
I suspect may be a conflict with react-native-google-analytics-bridge or react-native-firebase packages, but can't fine anything.
The app crashes in the Android and iPhone emulators.
This is the content of my packages.json file:
{
"name": "Myapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"MD5": "^1.3.0",
"moment": "^2.18.1",
"native-base": "^2.3.2",
"pushwoosh-react-native-plugin": "^3.1.0",
"react": "16.0.0-alpha.12",
"react-native": "0.48.3",
"react-native-fetch-blob": "^0.10.8",
"react-native-firebase": "^3.0.3",
"react-native-google-analytics-bridge": "^5.3.3",
"react-native-htmlview": "^0.12.0",
"react-native-img-cache": "^1.4.0",
"react-native-offline": "^3.1.1",
"react-native-progress": "^3.4.0",
"react-native-timeago": "^0.3.0",
"react-native-video": "^2.0.0",
"react-navigation": "^1.0.0-beta.11",
"rn-placeholder": "^1.0.1"
},
"devDependencies": {
"babel-jest": "21.0.2",
"babel-preset-react-native": "4.0.0",
"jest": "21.1.0",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
This are the dependencies in my android/build.gradle:
dependencies {
compile (project(':pushwoosh-react-native-plugin'))
{
exclude group: 'com.google.android.gms'
}
compile (project(':react-native-google-analytics-bridge'))
{
exclude group: 'com.google.android.gms'
}
compile(project(':react-native-firebase')) {
transitive = false
exclude group: 'com.google.android.gms'
}
compile ("com.google.android.gms:play-services-base:11.4.2"){
force = true;
}
compile("com.google.android.gms:play-services-analytics:11.4.2"){
force = true
}
compile ("com.google.firebase:firebase-core:11.4.2"){
force = true;
}
compile 'com.google.firebase:firebase-crash:11.4.2'
compile "com.google.firebase:firebase-analytics:11.4.2"
compile project(':react-native-fetch-blob')
compile project(':react-native-video')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:26.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}

I just fixed the error following the exact steps detailed in this article: https://medium.com/#suchydan/how-to-solve-google-play-services-version-collision-in-gradle-dependencies-ef086ae5c75f adding this lines:
compile("com.google.android.gms:play-services-gcm:11.4.2"){
force = true
}
compile("com.google.android.gms:play-services-location:11.4.2"){
force = true
}
This is my final android/app/build.gradle
dependencies {
compile (project(':pushwoosh-react-native-plugin'))
{
exclude group: 'com.google.android.gms'
}
compile (project(':react-native-google-analytics-bridge'))
{
exclude group: 'com.google.android.gms'
}
compile(project(':react-native-firebase')) {
transitive = false
exclude group: 'com.google.android.gms'
}
compile ("com.google.android.gms:play-services-base:11.4.2"){
force = true;
}
compile("com.google.android.gms:play-services-analytics:11.4.2"){
force = true
}
compile("com.google.android.gms:play-services-gcm:11.4.2"){
force = true
}
compile("com.google.android.gms:play-services-location:11.4.2"){
force = true
}
compile ("com.google.firebase:firebase-core:11.4.2"){
force = true;
}
compile 'com.google.firebase:firebase-crash:11.4.2'
compile "com.google.firebase:firebase-analytics:11.4.2"
compile project(':react-native-fetch-blob')
compile project(':react-native-video')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:26.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}

Related

Cannot find module 'firebase/app' while deploying Angular Universal app

I'm dealing with this issue for almost two weeks now. I tried a lot of workarounds but none seems to be working. I've installed angular-fire and firebase to its latest version, tried ng add #angular/fire, configured custom webpack.config.ts, tried rolling back to every suggested previous version. None fixed this issue.
The Actual Error:
de-10#de10-LIFEBOOK-A555:~/Desktop$ node dist/server.js
internal/modules/cjs/loader.js:797
throw err;
^
Error: Cannot find module 'firebase/app'
Require stack:
- /home/de-10/Desktop/dist/server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
at Function.Module._load (internal/modules/cjs/loader.js:687:27)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/home/de-10/Desktop/dist/server.js:125276:18)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:125199:70)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:124984:78)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/de-10/Desktop/dist/server.js' ]
}
And I can't let go of Firebase cause then I face:
ERROR in ../node_modules/#angular/fire/auth/auth.d.ts:4:28 - error TS2307: Cannot find module 'firebase/app'.
4 import { User, auth } from 'firebase/app';
~~~~~~~~~~~~~~
../node_modules/#angular/fire/firebase.app.module.d.ts:2:74 - error TS2307: Cannot find module 'firebase/app'.
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~~~~~~~~~~~
../node_modules/#angular/fire/firestore/collection-group/collection-group.d.ts:2:27 - error TS2307: Cannot find module 'firebase/app'.
~~~~~~~~~~~~~
.
.
.
app/services/notification.service.ts:29:38 - error TS2339: Property 'id' does not exist on type 'QueryDocumentSnapshot<unknown>'.
29 id: snap.payload.doc.id,
~~
app/services/notification.service.ts:68:35 - error TS2339: Property 'type' does not exist on type 'DocumentChange<unknown>'.
68 return snap.payload.type
~~~~
.
.
.
package.json
{
"name": "universal-ssr",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "npm run build:ssr",
"staging": "npm run build:ssr-staging && npm run serve:ssr",
"production": "npm run build:ssr && npm run serve:ssr",
"prod": "npm run build:ssr-production && npm run serve:ssr",
"build": "ng build --prod",
"test": "ng test",
"dev-start": "ng serve",
"ng serve": "ng serve --aot",
"lint": "ng lint",
"e2e": "ng e2e",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"build:ssr-staging": "npm run build:client-and-server-bundles-staging && npm run webpack:server",
"build:ssr-production": "npm run build:client-and-server-bundles-production && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod --build-optimizer && ng run universal-ssr:server --bundleDependencies all",
"build:client-and-server-bundles-staging": "ng build --c=staging --build-optimizer=true --stats-json && ng run universal-ssr:server",
"build:client-and-server-bundles-production": "ng build --c=production --build-optimizer=true && ng run universal-ssr:server --bundleDependencies all",
"webpack:server": "webpack --config webpack.config.js --progress --colors",
"webpack:analyzer": "webpack-bundle-analyzer dist/browser/stats.json",
"compodoc": "npx compodoc -p src/tsconfig.app.json -o"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.14",
"#angular/cdk": "^5.2.5",
"#angular/common": "^8.2.14",
"#angular/compiler": "^8.2.14",
"#angular/core": "^8.2.14",
"#angular/fire": "^5.4.2",
"#angular/forms": "^8.2.14",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/platform-server": "^8.2.14",
"#angular/pwa": "^0.803.24",
"#angular/router": "^8.2.14",
"#angular/service-worker": "^8.2.14",
"#ng-bootstrap/ng-bootstrap": "^4.0.0",
"#nguniversal/express-engine": "^6.1.0",
"#nguniversal/module-map-ngfactory-loader": "^6.1.0",
"angular2-datetimepicker": "^1.1.1",
"bootstrap": "^4.4.1",
"city-timezones": "^1.2.0",
"core-js": "^2.6.11",
"cors": "^2.8.4",
"express": "^4.17.1",
"firebase": "^7.13.1",
"jquery": "^3.4.1",
"moment-timezone": "^0.5.27",
"ng-bootstrap": "^1.6.3",
"ng2-search-filter": "^0.5.1",
"ngx-clipboard": "12.2.1",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-pagination": "^3.3.1",
"ngx-spinner": "^2.0.0",
"ngx-toggle-switch": "^2.0.5",
"ngx-ui-switch": "^8.3.0",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.0.0",
"save": "^2.4.0",
"ts-loader": "^4.0.0",
"tslib": "^1.10.0",
"uuid": "^3.4.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.23",
"#angular/cli": "^8.3.23",
"#angular/compiler-cli": "^8.2.14",
"#angular/http": "^7.2.16",
"#angular/language-service": "^8.2.14",
"#types/jasmine": "2.8.3",
"#types/jasminewd2": "^2.0.8",
"#types/node": "^6.14.9",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "5.4.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~3.5.3",
"webpack-cli": "^3.1.0"
}
}
webpack.config.js:
// Work around for https://github.com/angular/angular-cli/issues/7200
const path = require('path');
const webpack = require('webpack');
// change the regex to include the packages you want to exclude
const regex = /firebase\/(app|firestore)/;
module.exports = {
mode: 'production',
entry: {
// This is our Express server for Dynamic universal
server: './server.ts'
},
externals: {
'./dist/server/main': 'require("./server/main")'
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
resolve: { extensions: ['.ts', '.js'] },
target: 'node',
mode: 'none',
// this makes sure we include node_modules and other 3rd party libraries
externals: [/node_modules/, function (context, request, callback) {
// exclude firebase products from being bundled, so they will be loaded using require() at runtime.
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}],
optimization: {
minimize: false
},
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
noParse: /polyfills-.*\.js/,
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{
// Mark files inside `#angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
test: /(\\|\/)#angular(\\|\/)core(\\|\/).+\.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
server.ts:
import 'zone.js/dist/zone-node';
import * as express from 'express';
/* const express = require('express');
const join = require('path'); */
const compression = require('compression')
import { join } from 'path';
// Express server
const app = express();
// gzip
app.use(compression())
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(__dirname, 'browser');/* 'dist/browser' */
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap } = require('./dist/server/main');
// Our Universal express-engine (found # https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
You're getting this error because you're excluding firebase dependencies with this =>
const regex = /firebase\/(app|firestore)/;
module.exports = {
// this makes sure we include node_modules and other 3rd party libraries
externals: [/node_modules/, function (context, request, callback) {
// exclude firebase products from being bundled, so they will be loaded using require() at runtime.
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}],
};
Remove this
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
and your app will be fine.
One workaround is to install npm packages (firebase and #angular/fire) beside the dist folder and then run the deployment script.

Migrating Files from Bower to Lib folder in ASP.Net Core Web

I am new to ASP.Net Core + NPM. I have been following various online examples, and while their screen shots show it working, most don't actually work (in-full)...and the one I am working with now isn't "quite" working as advertised either.
For some reason, Bower Packages are NOT auto-migrating into the wwwroot\lib folder. Normally, I would expect them to do so by-default...but that may be asking to much.
Q: How do I get the Bower Packages to auto-install into the 'Lib' directory?
Also, just in case, I checked and created an EMPTY VERSION of the Web Application & it doesn't migrate the Bower Packages either. So I guess the expectation is for us to do it by-hand.
HERE ARE THE STEPS I HAVE TAKEN:
Using: Visual Studio 2017 (Community Edition)
STEP 1:
Created the following project, added MVC folders & folders into WWWRoot (see image below)
ASP.NET Core Web Application (.NET Core) project
Added MVC Folders
Added WWWRoot Folders
Added folders for TypeScript files
STEP 2:
Configure TypeScript
tsconfig.json, the TypeScript compiler configuration file (see below)
typings, the TypeScript type definition files file (see below)
TSCONFIG.JSON
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
"rootDir": "App",
"outDir": "wwwroot/app"
},
"compileOnSave": true,
"angularCompilerOptions": {
"genDir": ".",
"debug": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
TYPINGS.JSON
{
"globalDependencies": {
"jquery": "registry:dt/jquery",
"jasmine": "registry:dt/jasmine"
}
}
STEP 3:
Configure NPM to bring-in Angular 2 and its dependencies
PACKAGE.JSON
{
"version": "1.0.0",
"description": "NO404 administration panel",
"name": "no404 backoffice",
"readme": "no404 backoffice",
"license": "MIT",
"dependencies": {
"#angular/common": "~2.2.0",
"#angular/compiler": "~2.2.0",
"#angular/core": "~2.2.0",
"#angular/forms": "~2.2.0",
"#angular/http": "~2.2.0",
"#angular/platform-browser": "~2.2.0",
"#angular/platform-browser-dynamic": "~2.2.0",
"#angular/router": "~3.2.0",
"#angular/upgrade": "~2.2.0",
"angular-in-memory-web-api": "~0.1.15",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25",
"bower": "1.7.9",
"jquery": "^3.1.0"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"concurrently": "^2.2.0",
"gulp": ">=3.9.1",
"gulp-concat": ">=2.5.2",
"gulp-copy": ">=0.0.2",
"gulp-cssmin": ">=0.1.7",
"gulp-load-plugins": "^1.3.0",
"gulp-rename": ">=1.2.2",
"gulp-rimraf": ">=0.2.0",
"gulp-tsc": ">=1.2.0",
"gulp-uglify": ">=1.2.0",
"gulp-watch": ">=4.3.9",
"gulp-clean-css": "^3.0.4",
"gulp-clean": "^0.3.2",
"jasmine-core": "2.4.1",
"tslint": "^3.15.1",
"typescript": "^2.0.0",
"typings": "^1.3.2"
},
"scripts": {
"start": "concurrently \"npm run gulp\" \"npm run watch\" \"npm run tsc:w\"",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"gulp": "gulp",
"watch": "gulp watch",
"ngc": "ngc"
}
}
STEP 4:
Configure Gulp
GULP.CONFIG.JS
module.exports = function () {
var base = {
webroot: "./wwwroot/",
node_modules: "./node_modules/"
};
var config = {
/**
* Files paths
*/
angular: base.node_modules + "#angular/**/*.js",
app: "App/**/*.*",
appDest: base.webroot + "app",
js: base.webroot + "js/*.js",
jsDest: base.webroot + 'js',
css: base.webroot + "css/*.css",
cssDest: base.webroot + 'css',
lib: base.webroot + "lib/",
node_modules: base.node_modules,
angularWebApi: base.node_modules + "angular2-in-memory-web-api/*.js",
corejs: base.node_modules + "core-js/client/shim*.js",
zonejs: base.node_modules + "zone.js/dist/zone*.js",
reflectjs: base.node_modules + "reflect-metadata/Reflect*.js",
systemjs: base.node_modules + "systemjs/dist/*.js",
rxjs: base.node_modules + "rxjs/**/*.js",
jasminejs: base.node_modules + "jasmine-core/lib/jasmine-core/*.*"
};
return config;
};
STEP 5:
Create Gulp tasks
GULPFILE.JS
"use strict";
var gulp = require('gulp');
var config = require('./gulp.config')();
var cleanCSS = require('gulp-clean-css');
var clean = require('gulp-clean');
var rename = require('gulp-rename');
var $ = require('gulp-load-plugins')({ lazy: true });
gulp.task("clean:js", function (cb) {
//return $.rimraf('wwwroot/js/*.min.js', cb);
return gulp.src('wwwroot/js/*.min.js', { read: false }).pipe(clean());
});
gulp.task("clean:css", function (cb) {
//return $.rimraf('wwwroot/css/*.min.css', cb);
return gulp.src('wwwroot/css/*.min.css', { read: false }).pipe(clean());
});
gulp.task('minify:css', function () {
return gulp.src(config.css)
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest(config.cssDest));
});
gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task('minify', ['minify:css']);
gulp.task("copy:angular", function () {
return gulp.src(config.angular,
{ base: config.node_modules + "#angular/" })
.pipe(gulp.dest(config.lib + "#angular/"));
});
gulp.task("copy:angularWebApi", function () {
return gulp.src(config.angularWebApi,
{ base: config.node_modules })
.pipe(gulp.dest(config.lib));
});
gulp.task("copy:corejs", function () {
return gulp.src(config.corejs,
{ base: config.node_modules })
.pipe(gulp.dest(config.lib));
});
gulp.task("copy:zonejs", function () {
return gulp.src(config.zonejs,
{ base: config.node_modules })
.pipe(gulp.dest(config.lib));
});
gulp.task("copy:reflectjs", function () {
return gulp.src(config.reflectjs,
{ base: config.node_modules })
.pipe(gulp.dest(config.lib));
});
gulp.task("copy:systemjs", function () {
return gulp.src(config.systemjs,
{ base: config.node_modules })
.pipe(gulp.dest(config.lib));
});
gulp.task("copy:rxjs", function () {
return gulp.src(config.rxjs,
{ base: config.node_modules })
.pipe(gulp.dest(config.lib));
});
gulp.task("copy:app", function () {
return gulp.src(config.app)
.pipe(gulp.dest(config.appDest));
});
gulp.task("copy:jasmine", function () {
return gulp.src(config.jasminejs,
{ base: config.node_modules + "jasmine-core/lib" })
.pipe(gulp.dest(config.lib));
});
gulp.task("dependencies", [
"copy:angular",
"copy:angularWebApi",
"copy:corejs",
"copy:zonejs",
"copy:reflectjs",
"copy:systemjs",
"copy:rxjs",
"copy:jasmine",
"copy:app"
]);
gulp.task("watch", function () {
return $.watch(config.app)
.pipe(gulp.dest(config.appDest));
});
gulp.task("default", ["clean", 'minify', "dependencies"]);
For bower, a configuration file named .bowerrc determines the destination of installed packages. Make sure this file contains:
{
"directory": "wwwroot/lib"
}
Now once you call bower install in the command line, the packages should be restored in ./wwwroot/lib relative to where your bower file is.
Just to make sure, npm is different than bower. They are 2 different package managers so bower packages need to be specified in bower.json (which you don't have as your screenshot shows). For npm, packages are specified in package.json
In your steps, you are using npm. Your gulp task should work fine and move packages from ./node_modules/ to ./wwwroot/lib/. However, recent versions of npm do not allow blank spaces in description and name fields in the package.json file. You should update those then try and run the following:
npm install
npm update
gulp

How do I use grunt-run to run a npm script?

How do I run my 'test' npm script using Grunt? It says here that I can do it using grunt-run.
package.json
.
.
"scripts": {
"test": "jest"
},
"jest": {
"preset": "jest-exponent"
}
.
.
.
"devDependencies": {
"babel-jest": "^17.0.0",
"babel-preset-react-native": "^1.9.0",
"grunt": "^1.0.1",
"grunt-run": "^0.6.0",
"jest-exponent": "^0.1.3",
"jest-react-native": "^17.0.0",
"react-test-renderer": "^15.3.2"
}
Gulpfile.js - boilerplate code
module.exports = function(grunt) {
grunt.initConfig({
run: {
options: {
// Task-specific options go here.
},
your_target: {
cmd: 'executable',
args: [
'arg1',
'arg2'
]
}
}
})
}
What is the point of Grunt/Gulp if you can just use npm scripts? They require a lot less set up and do the same thing.
not sure if that will helps you, you need install first the task grunt-exec, in my sample i am runing a node server.js
this in my config.
Gruntfile.js
config.exec = {
run_server: 'node server.js'
}
grunt.registerTask('serve', ['exec:run_server']);
package.json
"grunt-exec": "^1.0.1",

Fatal error using Grunt Watch to convert SASS to CSS

I'm using Grunt to live convert my SASS files to CSS via watch.
The thing is: I can run the Compass task normaly, the CSS is created very well, but when I use WATCH I got the error:
grunt.util._.contains is not a function
Here's my package.json:
{
"name": "myName",
"description": "myDesc",
"author": "mySelf",
"version": "0.0.1",
"private": true,
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-compass": "^1.1.1",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-watch": "^0.4.4"
}
}
Here's my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},
watch: {
css: {
files: 'assets/**/*.{scss,sass}',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['compass','watch']);
};
I try a lot of changes but nothing helps
Update!
After a long night, solve the problem... Please read my own answer
I solved the problem! The ^4.0 lodash version has changed contains to includes, and the grunt-contrib-watch uses the old lodash syntax. So I changed only one line in the code. Find
node_modules/grunt-contrib-watch/tasks/watch.js on line 116:
Old line:
if (!grunt.util._.contains(target.options.event, 'all') && !grunt.util._.contains(target.options.event, status)) {
New line:
if (!grunt.util._.includes(target.options.event, 'all') && !grunt.util._.includes(target.options.event, status)) {
Now the Watch with Compass/SASS works like a charm ;)
I hope it helps someone!

Bower installed components that not defined in bower.json to asp.net 5 application

I had a problem when trying install client packages using Bower in ASP.NET 5 application. I defined some packages I want to install to my application in bower.json file, like this:
{
"name": "bower",
"license": "Apache-2.0",
"private": true,
"dependencies": {
"jquery": "1.11.2",
"modernizr": "2.8.3",
"bootstrap": "3.3.4",
"jquery.uniform": "2.1.2",
"fluidbox": "1.4.3",
"owl-carousel": "1.3.2",
"photo.swipe": "4.0.8",
"magnific-popup": "1.0.0",
"slippry": "1.2.9",
"fastclick": "1.0.6",
"imagesloaded": "3.1.8",
"jquery-validate": "1.13.1",
"fitvids": "1.1.0",
"jquery-gridrotator": "0.1.0" }
After saving, I saw in the hidden bower_components folder there were some other packages I didn't defined in the bower.json file, like this:
After running grunt task, I saw some strange packages installed to my application.
My simple gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: true
}
}
}
});
grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
};
So, how can I only install packages I want to my ASP.NET 5 application? Thank you so much.
They are dependencies installed by bower by example Masonry use this dependencies
{
"name": "masonry",
"version": "3.3.0",
"description": "Cascading grid layout library",
"main": "masonry.js",
"dependencies": {
"get-size": "~1.2.2",
"outlayer": "~1.4.0",
"fizzy-ui-utils": "~1.0.1"
}
}
I recomend you to use the dest,js_dest, css_dest and font_dest to split the files by type and set the option keepExpandedHierarchy to false something like this
{
dest: "wwwroot/lib",
js_dest: "wwwroot/lib/js",
css_dest: "wwwroot/lib/css",
fonts_dest: "wwwroot/lib/font",
options: {
keepExpandedHierarchy: false
}
}
and use some module like includeSource to add all the files in your cshtml file
includeSource: {
layout: {
files: {
'Views/Shared/_Layout.cshtml': 'Views/Shared/_Layout.cshtml'
}
},
options: {
basePath: "wwwroot/lib/js",
baseUrl: '~/lib/',
}
}
and you must add the markup in your page
<!-- include: "type": "js", "files":"**/*.js", "ordering": "top-down" -->
<!-- /include -->
hope it helps

Resources