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",
Related
I am using vite to build my assets and this works fine except for the background images.
Example:
<img src="/img/ruben.jpg" alt="Ruben">
Works and has as url: http://mylocalsite.nl.test/img/ruben.jpg which is good.
But this:
&:before{
content: "";
background-image: url('/img/svg/echtveilig-beeldmerk.svg');
}
Has as url: http://127.0.0.1:5173/img/svg/echtveilig-beeldmerk.svg which is the local server started by vite but I don't want that, I just want the same url as for image tags. How can I fix that?
I tried creating a file 'postcss.config.js' and adding:
module.exports = {
plugins: {
autoprefixer: {},
},
};
But this does not work.
My package json:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.50.1",
"sass-loader": "^12.1.0",
"vite": "^4.0.0"
},
"dependencies": {
"bootstrap": "^5.3.0-alpha1",
"autoprefixer": "^10.4.8",
"swiper": "^8.1.3"
}
}
try this instead
url("{{ asset('assets/img/svg/echtveilig-beeldmerk.svg') }}")
Following exactly the getting started guide on the webpack site I run into this error on build:
ERROR in ./src/index.js Module not found: Error: Can't resolve 'css-loader' in 'C:\Users\Dominik\Desktop\tutorial' # ./src/index.js
2:0-21 webpack.config.js
The css-loader is installed locally. It is registered in the package.json. What Im I doing wrong?
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
};
package.json
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.0",
"style-loader": "^1.1.1",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
index.js
import _ from "lodash";
import "./style.css";
function component() {
const element = document.createElement("div");
element.innerHTML = _.join(["Hello", "webpack"], " ");
element.classList.add("hello");
return element;
}
document.body.appendChild(component());
style.css
.hello {
color: red;
}
Try re-running npm install --save-dev css-loader. Can you see it in your node_modules folder?
EDIT
Uninstalling and re-installing the module fixed it:
npm remove css-loader && npm install --save-dev css-loader
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
}
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!
I am working on a webapp built by someone else...the commands to build and run are
npm install
bower install
grunt serve
I have used npm and bower with no problems before..everything seems to work until grunt reaches the 'connect:livereload" task, when the command line just hangs, with no error messages.
Below is the package.json file and the output from grunt serve -v:
(package.json)
{
"name": "app",
"version": "0.0.1",
"dependencies": {
"openlayers": "^3.14.2"
},
"devDependencies": {
"connect-livereload": "^0.5.3",
"grunt": "^0.4.5",
"grunt-bower-requirejs": "^2.0.0",
"grunt-browserify": "^4.0.1",
"grunt-connect-proxy": "^0.2.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-connect": "^0.10.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-handlebars": "^0.10.2",
"grunt-contrib-imagemin": "^0.9.4",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-less": "^1.2.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-jsbeautifier": "^0.2.10",
"grunt-jscs": "^1.8.0",
"grunt-jsdoc": "^0.6.7",
"grunt-karma": "^0.11.0",
"grunt-open": "^0.2.3",
"grunt-processhtml": "^0.3.8",
"grunt-requirejs": "^0.4.2",
"grunt-usemin": "^3.0.0",
"jit-grunt": "^0.9.1",
"jscs": "^1.13.1",
"jscs-stylish": "^0.3.1",
"jsdoc": "^3.3.2",
"jshint-stylish": "^2.0.0",
"karma": "^0.13.0",
"karma-chai": "^0.1.0",
"karma-chai-sinon": "^0.1.5",
"karma-chrome-launcher": "^0.1.12",
"karma-coverage": "^0.4.2",
"karma-firefox-launcher": "^0.1.6",
"karma-ie-launcher": "^0.2.0",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.0",
"karma-requirejs": "^0.2.2",
"mocha-xunit-zh": "0.0.3",
"phantomjs": "^1.9.17",
"requirejs": "^2.1.18",
"time-grunt": "^1.2.1"
},
"engines": {
"node": ">=0.12.0"
}
}
(verbose) output (starting at live:reload)
Running "connect:livereload" (connect) task
Verifying property connect.livereload exists in config...OK
File: [no files]
Options: protocol="http", port=9001, hostname="0.0.0.0", base=".", directory=nul
l, keepalive=false, debug=false, livereload=false, open=false, useAvailablePort=
false, onCreateServer=null, middleware=undefined
Here is the (non-verbose) output after running 'grunt serve':
$ grunt serve
Running "serve" task
Running "clean:server" (clean) task
>> 1 path cleaned.
Running "jshint:all" (jshint) task
√ No problems
Running "jscs:src" (jscs) task
No code style errors found.
>> 21 files without code style errors.
Running "createDefaultTemplate" task
Running "handlebars:compile" (handlebars) task
>> 1 file created.
Running "clean:dist" (clean) task
>> 1 path cleaned.
Running "createDefaultTemplate" task
Running "handlebars:compile" (handlebars) task
>> 1 file created.
Running "less:dist" (less) task
>> 1 stylesheet created.
Running "copy:env" (copy) task
Copied 1 file
Running "copy:ol" (copy) task
Copied 2 files
Running "configureProxies" task
Proxy created for: /api to 52.20.39.250:80
Running "connect:livereload" (connect) task
Here is gets stuck (at ' Running "connect:livereload" (connect) task')... no cursor or errors or any further output....
Here I would expect to see "Started connect web server on http://localhost:9001" and be able to view the app, but instead it hangs here, with no further output or errors until I force quit. Nothing is served to that port (I tried switching port numbers as a test in the grunt-task/config/connect file of the app, but no change)
Here is the Gruntfile:
'use strict';
module.exports = function (grunt) {
// show elapsed time at the end
require('time-grunt')(grunt);
// load all grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin',
configureProxies: 'grunt-connect-proxy'
});
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
grunt.initConfig({yeoman: yeomanConfig});
//load all custom task configs
grunt.loadTasks('grunt-tasks/config');
grunt.loadTasks('grunt-tasks/register');
grunt.registerTask('default', [
'jshint',
'jscs',
//'test',
'build'
]);
};
Here is the 'connect' file, in grunt-tasks/config:
module.exports = function(grunt) {
var SERVER_PORT = 9001;
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({
port: LIVERELOAD_PORT
});
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
grunt.config('connect', {
options: {
port: grunt.option('port') || SERVER_PORT,
hostname: '0.0.0.0'
},
proxies: [{
context: ['/api'],
host: 'HOST IP',
port: 80
}],
livereload: {
options: {
middleware: function (connect) {
return [
proxySnippet,
lrSnippet,
mountFolder(connect, '.tmp'),
connect().use(
'/node_modules',
connect.static('./node_modules')
),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
test: {
options: {
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
testInBrowser: {
options: {
middleware: function (connect) {
return [
proxySnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
dist: {
options: {
middleware: function (connect) {
return [
proxySnippet,
connect().use(
'/node_modules',
connect.static('./node_modules')
),
mountFolder(connect, yeomanConfig.dist)
];
}
}
}
});
}
One thing I noticed: when in the webapp for
lder of this project, my npm version is 2.14.20, but in my user folder, the npm version is 3.8.3 (in both directories, my version of Node is the same, 4.4.1) .. could this be a source of this problem? I just ran npm install npm -g in the webapp directory, but it did not change the version when viewed from that directory.