My jest.config.js looks like :
module.exports = {
moduleFileExtensions: ['mock.js', 'ts', 'tsx', 'js', 'jsx', 'json', 'node'],
moduleNameMapper: {
'\\.(gif|ttf|eot|png|jpg)$': '<rootDir>/test/__mocks__/mockExportString.js',
},
"testResultsProcessor": "<rootDir>/node_modules/jest-html-reporter"
};
gitlabci:
artifacts:
expire_in: 1 hour
paths:
- test-build.tar.gz
reports:
junit:
- $CI_PROJECT_DIR/plugins/creative-dispa/test-*.html
when: always
I can see the test report generated but gitlab ci isn't able to follow the HTML report format.
Related
I'm trying to use sharp on a couple of AWS lambda#edge. The idea is to resize and cache an image when requested (see this).
I'm also using serverless with serverless-webpack to deploy the lambdas.
I can deploy the lambdas and everything goes well if I test them in AWS console.
However, these are lamda#edge and they will be used as cloudwatch request/response triggers. Therefore, the maximum lambda size is 1Mb.
My problem is I can't seem to get even near that size, the best I could achieve was 11.6Mb. And, it seems it's possible as seen in that first link.
This is the serverless configuration which results in 34.7Mb lambda:
custom:
webpack:
includeModules:
forceExclude:
- aws-sdk
packagerOptions:
scripts:
- rm -rf node_modules/sharp && docker run -v "$PWD":/var/task lambci/lambda:build-nodejs10.x npm install sharp
package:
exclude:
- .env
- .git/**
- .gitlab-ci.yml
- tests*
excludeDevDependencies: true
individually: true
And with this I got 11.6Mb:
custom:
webpack:
includeModules:
forceExclude:
- aws-sdk
packagerOptions:
scripts:
- npm rebuild sharp --target=10.15.0 --target_arch=x64 --target_platform=linux
package:
exclude:
- .env
- .git/**
- .gitlab-ci.yml
- tests*
excludeDevDependencies: true
individually: true
I've also played around with the package.exclude, but with no luck:
- node_modules/**
- '!node_modules/sharp/**'
and this is my webpack config:
const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');
const entries = {};
Object.keys(slsw.lib.entries).forEach(key => (entries[key] = ['./source-map-install.js', slsw.lib.entries[key]]));
module.exports = {
mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
entry: slsw.lib.entries,
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
},
// externals: ['sharp'], #tried that too
externals: [nodeExternals()],
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, '.webpack'),
filename: '[name].js',
},
target: 'node',
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.ts?$/, loader: 'ts-loader', options: { happyPackMode: true } },
],
},
};
When running locally, I can see what it's packaging... the node_modules folder has sharp and its dependencies, it seems. But the biggest folder is sharp.
I suspect I'm packaging stuff inside sharp folder that I don't need... but I can't seem to understand what.
Any help?
Thanks
UPDATE:
Reading more carefully, it seems the function where I need sharp (origin-response) size limit is 5Mb.
I just need to find a way to package sharp only for that function. Webpack seems to put it in both, even though I don't need it on the other function (viewer request).
Any help on this?
I ended up running a script in custom.webpack.packagerOptions.scripts that will ignore sharp where it's not needed.
This is the script I used:
custom:
webpack:
includeModules:
forceExclude:
- aws-sdk
packagerOptions: # uncomment this block if invoking locally
scripts:
- if [ -f "src/handlers/myfunction.js" ]; then rm -rf node_modules/sharp && docker run -v "$PWD":/var/task lambci/lambda:build-nodejs10.x npm install sharp; else rm -rf node_modules; fi
I am trying to use GitLab CI to run some client-side unit test written using QUnit. Now to run the Qunit test I am using the grunt-contrib-qunit plugin. To run these tests in headless mode I am using this plugin which hosts it on a localhost server in a console and runs all unit tests. When running this project locally I am successfully able to run all the unit tests but when I checking in my code which kicks of the CI process, on GitLab, it fails on starting the phantomjs server and gives timeout error. I am also providing the jsbin link of the two text files which are basically the output of the unit test from my console. One file is of my local system and another is from the GitLab CI that runs on GitLab website when I check-in my code.
Local Console Output File Dump
Gitlab CI Output Dump
Adding my gitlab-ci.yaml file
image: node:4.2.2
before_script:
- dir
- cd sapui5_repo
- dir
- cd app-with-tests
build:
stage: build
script:
- npm i
- npm run test
cache:
policy: push
paths:
- node_modules
artifacts:
paths:
- built
Also adding my gruntfile if that helps
/* global module */
module.exports = function (grunt) {
grunt.initConfig({
qunit: {
all: {
options: {
timeout: 9000,
urls: [
"http://localhost:9000/webcontent/test/unit/unitTests.qunit.html"
]
}
},
//all: ["webcontent/test/unit/unitTests.qunit.html"],
options: {
timeout: 2000,
}
},
connect: {
options: {
//open: true,
},
first: {
options: {
port: 9000,
//livereload: 3500,
base: "./"
}
},
second: {
options: {
open: {
target: "http://localhost:9000/webcontent"
},
keepalive: true,
port: 9000,
livereload: 3501,
base: "./",
}
}
},
});
grunt.loadNpmTasks("grunt-contrib-connect");
grunt.loadNpmTasks("grunt-contrib-qunit");
grunt.registerTask("test", [
"connect:first", "qunit"
]);
grunt.registerTask("default", [
"connect:second"
]);
};
In my src/config/index.js, the build settings is bellow:
const path = require('path')
module.exports = {
build: {
env: require('./env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
but after I npm run build, I get the results:
shouldn't the assets file in the static directory? where is the error of config?
I want the dist directory like this:
my webpack.prod.config.js default code is bellow:
......
new HtmlWebpackPlugin({
filename: '/index.html',
template: './src/template/index.ejs',
inject: false
})
]
});
the filename: '/index.html', so, the index.html is in the above of dist directory.
I'm deploying my first webpack app. I probably have a few misconceptions.
My (simple) app is Webpack2 + Bootstrap4 + ReactJS.
I ran ... npm run prod (the optimizing sequence).
My "dist" folder now contains the files & folder that I list below.
I use DigitalOcean, Nginx, express, ... to deploy my Webpack app.
I uploaded my Webpack app into a directory that is in my DigitalOcean top directory.
In this directory named "wp2-bs4-rjs", I placed:
index.html, app.bundle.js, app.css, imgs (folder).
This "wp2-bs4-rjs" directory also contains:
package.json (for express) & node_modules folder (for express, for deployment).
I'm assuming my Webpack app does not use the node_modules folder,
now that it has been optimized (?).
IMPORTANT: When I use webpack-dev-server in my computer's localhost,
the Bootstrap & jQuery works (everything works).
BUT, when I view my Webpack app online, I see the text and its background image,
but no Bootstrap influence.
Since I see my background image & my css styles, I know the app.css file is properly working.
Also, since I see my text, I know my app.bundle.js file is partially working.
BUT, for some reason, the Bootstrap & jQuery in my app.bundle.js file is not working.
I have no errors in my JavaScript console & the networking tab.
Do you have any ideas of what I'm doing wrong ?
Here's it's URL: wp2-bs4-rjs
My Webpack app is served on my domain's localhost, port 3000, using reverse proxy.
- - - - - - - - - - - - - - - - - -
Thank-you, MLR
========================================================================
Update: I tried installing a few Node packages as dependencies,
to see if it made a difference. It did not.
Installed in my DigitalOcean server & my computer's webpack-dev-server (Webpack project):
"babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "bootstrap": "^4.0.0-alpha.6", "express": "^4.15.3", "jquery": "^3.2.1", "react": "^15.6.1", "react-dom": "^15.6.1", "tether": "^1.4.0", "webpack": "^3.0.0"
- - - - - - - - - - - - - - - - - -
Not installed in my DigitalOcean server >Webpack project,
but is installed in my computer's webpack-dev-server version:
ejs, css-loader, style-loader, sass-loader, node-sass, extract-text-webpack-plugin, webpack-dev-server, babel-loader, babel-core, rimraf, file-loader, image-webpack-loader, libpng, bootstrap-loader, resolve-url-loader, url-loader, imports-loader exports-loader, postcss postcss-loader, purifycss-webpack, purify-css
========================================================================
Update: Since the node_modules folder is in the same directory as app.bundle.js ...
& all the other (non-image) files, ...
in the app.bundle.js, I tried changing all occurrences of ./node_modules to node_modules.
It did not work. Although my problem could be a combination of errors.
========================================================================
Hi olore, here's my Webpack config (as you asked).
'use strict';
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');
const isProd = process.env.NODE_ENV === 'production';
const cssDev = ['style-loader','css-loader', 'resolve-url-loader', 'sass-loader'];
const cssProd = ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader'],
publicPath: '/dist'
});
let cssConfig = isProd ? cssProd : cssDev;
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
resolve: { extensions: ['.js','.jsx','.html','.css','.scss'] },
module: {
rules: [{
test: /\.scss$/,
use: cssConfig// potentially the ExtractTextPlugin.extract(...)
},{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader?name=[name].[ext]&outputPath=imgs/&publicPath=./',
'image-webpack-loader'
]
},{
test: /\.(woff2?|svg)$/,
use: 'url-loader?limit=10000&name=fonts/[name].[ext]'
},{
test: /\.(ttf|eot)$/,
use: 'file-loader&name=fonts/[name].[ext]'
},{
test: /bootstrap[\/\\]dist[\/\\]js[\/\\]umd[\/\\]/,
use: 'imports-loader?jQuery=jquery'
}
],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
hot: true,
open: true,
stats: 'errors-only'
},
plugins: [
new HtmlWebpackPlugin({
title: 'ReactJS Webpack Bootstrap',
hash: true,
template: './index.html',
minify: {collapseWhitespace: true}
}),
new ExtractTextPlugin({
filename: '[name].css',
disable: !isProd,
allChunks: true
}),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'index.html')),
purifyOptions: { minify: true }
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
Button: "exports-loader?Button!bootstrap/js/dist/button",
Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
Util: "exports-loader?Util!bootstrap/js/dist/util"
})
]
};
I am almost absolutely new to grunt.
I used grunt with bootstrap 3.1.1 and the grunt watch-command worked out great. My bootstrap.min.css file was compiled every time. (i upload my bootstrap.min.css)
Later on i lost my 3.1.1 grunt file (long story short my computer crashed).
So now with Bootstrap 3.2.0 i was going to restablish my grunt-work-flow.
But now when i use grunt watch i only get the "bootstrap.css" and "bootstrap.theme.css" compiled.
I have spent the last hours to figure this out without success.
WHAT I WANT
I want grunt watch to compile the minified "bootstrap.min.css"
So how do i call the min.css-function on the watch?
I will be glad to get some help.
Grunt watch will only watch the files then run tasks you have set. I am assuming in your gruntfile you ahve something like this:
css: {
files: [
'bootstrap.css',
],
tasks: ['less'],
},
In the less task you should have something like below. Note the cleancss option being set to true:
options: {
cleancss: true
},
files: {
"dest/bootstrap.min.css": "src/bootstrap.css",
"dest/bootstrap.theme.min.css": "src/bootstrap.theme.css"
}
UPDATE:
Based on the file you uploaded you should be running the cssmin:core task when the watch is triggered.
UPDATE 2:
To update the watch task you can just add the cssmin:core task to the less subtask:
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin:core]
}
Here you are telling it to run the less task, followed by the cssmin task whenever one of the less files is changed while watching.
Your gruntfile.js will have a 'watch' section as below
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:src', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: 'less'
}
},
The tasks under less subsection define the tasks that 'grunt watch' will run. In Bootstrap 3.3.2 (I guess in 3.1.1 also it would be the same) is the 'cssmin' task that minifies the core bootstrap css. So you need to add the task to less so the code above becomes
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:src', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin']
}
},
None of the above worked for me. Looks like the css minification command changed to cssmin:minifyCore so I have updated my watch task to the following:
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:core', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin:minifyCore']
}
},
Hopefully this helps others!