Compile & compress SASS on deploybot with Grunt - deployment

I've got a grunt task to compile & compress my JS & SASS files which all works fine locally but when I try using it on deploybot.com I just get an error stating:
sass sass/main.scss public/css/main.css --style=compressed --no-cache
This is my grunt file:
module.exports = function(grunt){
grunt.initConfig({
concat:{
options:{
stripBanners: true,
sourceMap: true,
sourceMapName: 'src/js/jsMap'
},
dist:{
src: ['js/vendor/jquery.slicknav.js', 'js/vendor/swiper.js', 'js/app/*.js'],
dest: 'src/js/main.js'
},
},
copy:{
js:{
files:[
{ src: 'src/js/main.js', dest: 'public/js/main.js', },
{ src: 'src/js/jsMap', dest: 'public/js/jsMap', }
],
},
},
uglify:{
production:{
options:{
sourceMap: true,
sourceMapIncludeSources: true,
sourceMapIn: 'src/js/jsMap', // input sourcemap from a previous compilation
},
files: {
'public/js/main.js': ['src/js/main.js'],
},
},
},
sass:{
dev:{
options:{
style: 'expanded'
},
files:{
'public/css/main.css': 'sass/main.scss'
}
},
production:{
options:{
style: 'compressed',
noCache: true
},
files:{
'public/css/main.css': 'sass/main.scss'
}
}
},
watch: {
dev:{
files: ['js/**/*.js', 'sass/*.scss'],
tasks: ['build-dev'],
options: {
spawn: false,
interrupt: true,
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build-dev', ['concat', 'copy:js', 'sass:dev']);
grunt.registerTask('build-prod', ['concat', 'uglify:production', 'sass:production']);
grunt.registerTask("watch-dev", ['watch:dev']);
};
These are the commands I'm running to compile & compress my code, all the version specific stuff was to try and fix the problem I have the same issue when remove it.
nvm install 0.10.25
nvm use 0.10.25
npm uninstall grunt -g
npm install grunt-cli -g
npm install grunt#0.4.5 --save-dev
npm install -g grunt-cli
npm install --save-dev
grunt build-prod --stack --verbose --debug
This is what is shown in the log file after the node & grunt install bits:
output Loading "Gruntfile.js" tasks...OK
output + build-dev, build-prod, watch-dev
output Running tasks: build-prod
output Running "build-prod" task
output [D] Task source: /source/Gruntfile.js
output Running "concat" task
output [D] Task source: /source/node_modules/grunt-contrib-concat/tasks/concat.js
output Running "concat:dist" (concat) task
output [D] Task source: /source/node_modules/grunt-contrib-concat/tasks/concat.js
output Verifying property concat.dist exists in config...OK
output Files: js/vendor/jquery.slicknav.js, js/vendor/swiper.js, js/app/centre-events-boxes.js, js/app/centre-footer.js, js/app/club.move-nav.js, js/app/club.social-link-position.js, js/app/func.stick-to-top.js, js/app/home.move-nav.js, js/app/home.stick-to-top.js, js/app/match-event-box-height.js, js/app/slicknav.js, js/app/swiperjs-slider.js -> src/js/main.js
output Options: separator="\n", banner="", footer="", stripBanners, process=false, sourceMap, sourceMapName="src/js/jsMap", sourceMapStyle="embed"
output Reading js/vendor/jquery.slicknav.js...OK
output Reading js/vendor/swiper.js...OK
output Reading js/app/centre-events-boxes.js...OK
output Reading js/app/centre-footer.js...OK
output Reading js/app/club.move-nav.js...OK
output Reading js/app/club.social-link-position.js...OK
output Reading js/app/func.stick-to-top.js...OK
output Reading js/app/home.move-nav.js...OK
output Reading js/app/home.stick-to-top.js...OK
output Reading js/app/match-event-box-height.js...OK
output Reading js/app/slicknav.js...OK
output Reading js/app/swiperjs-slider.js...OK
output Writing src/js/jsMap...OK
output Source map src/js/jsMap created.
output Writing src/js/main.js...OK
output File src/js/main.js created.
output Running "uglify:production" (uglify) task
output [D] Task source: /source/node_modules/grunt-contrib-uglify/tasks/uglify.js
output Verifying property uglify.production exists in config...OK
output Files: src/js/main.js -> public/js/main.js
output Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report="min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8=false, quoteStyle=0, sourceMap, sourceMapIncludeSources, sourceMapIn="src/js/jsMap"
output Minifying with UglifyJS...Reading src/js/jsMap...OK
output Parsing src/js/jsMap...OK
output Reading src/js/main.js...OK
output OK
output Writing public/js/main.js...OK
output Writing public/js/main.js.map...OK
output File public/js/main.js.map created (source map).
output File public/js/main.js created: 192.88 kB → 77.01 kB
output >> 1 sourcemap created.
output >> 1 file created.
output Running "sass:production" (sass) task
output [D] Task source: /source/node_modules/grunt-contrib-sass/tasks/sass.js
output Verifying property sass.production exists in config...OK
output Files: sass/main.scss -> public/css/main.css
output Options: style="compressed", noCache
output Command: sass sass/main.scss public/css/main.css --style=compressed --no-cache
output Errno::EISDIR: Is a directory # rb_sysopen - public/css/main.css
output Use --trace for backtrace.
output Warning: Exited with error code 1 Use --force to continue.
output Aborted due to warnings.
I've been trying to fix this for days and have no ideas. I've tried contacting their support too.

Turns out after contacting their support team multiple times the problem was on their end, something to do with a caching mechanism I think. Nothing I could do to solve it without their support though.

Related

Getting this error with the #metaplex-foundation/js-next SDK

Currently working on a react app and I'm getting this error after installing metaplex.
My react-scripts version is 4.0.3
./node_modules/#metaplex-foundation/js-next/dist/esm/programs/token/gpaBuilders/TokenGpaBuilder.mjs
Can't import the named export 'ACCOUNT_SIZE' from non EcmaScript module (only default export is available)
I found out the solution in the git of metaplex here. I will leave you here the whole answer anyway.
Getting Started with Metaplex and CRA 5
This example sets up a new React app with Metaplex using "Create React App" (CRA) version 5 — i.e. using Webpack 5.
This example has been generated using the following steps:
Create a new project using the "Create React App" command.
npx create-react-app getting-started-react-cra5
cd getting-started-react-cra5
Install the Metaplex and the Solana SDKs.
npm install #metaplex-foundation/js #solana/web3.js
Install some polyfills.
npm install assert util crypto-browserify stream-browserify
Install and use react-app-rewired.
# Installs react-app-rewired.
npm install react-app-rewired
# Replaces "react-scripts" with "react-app-rewired" in package.json scripts.
sed -i '' 's/react-scripts /react-app-rewired /g' package.json
Override Webpack 5 configurations.
Create a new file to override Webpack 5 configurations.
touch config-overrides.js
Copy the following code inside the new config-overrides.js file.
const webpack = require("webpack");
module.exports = function override(webpackConfig) {
// Disable resolving ESM paths as fully specified.
// See: https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
webpackConfig.module.rules.push({
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
});
// Ignore source map warnings from node_modules.
// See: https://github.com/facebook/create-react-app/pull/11752
webpackConfig.ignoreWarnings = [/Failed to parse source map/];
// Polyfill Buffer.
webpackConfig.plugins.push(
new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })
);
// Polyfill other modules.
webpackConfig.resolve.fallback = {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
util: require.resolve("util"),
assert: require.resolve("assert"),
fs: false,
process: false,
path: false,
zlib: false,
};
return webpackConfig;
};
Update your browser requirements.
Update the browserslist object of your package.json to include the following production requirements.
"browserslist": {
"production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
+ "chrome >= 67",
+ "edge >= 79",
+ "firefox >= 68",
+ "opera >= 54",
+ "safari >= 14"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
That's it!
You should not use #metaplex-foundation/js-next SDK, the actual repo is #metaplex-foundation/js, the name was changed and the updated repo is this, so try using #metaplex-foundation/js instead

reexport - SyntaxError: Unexpected token 'export'

There is such a file. That imports from API and exports at once.
export { extractValue, parse, parseCommand } from './parser'
export { Manager, EVENTS } from './manager'
export { runCLI, runCommand, bootstrapCommandManager } from './cli'
I receive an error:
export { extractValue, parse, parseCommand } from './parser'
^^^^^^
SyntaxError: Unexpected token 'export'
There is my babel.config.js
module.exports = {
presets: [['#babel/preset-env', {targets: {node: 'current'}}]],
plugins: [
['#babel/plugin-transform-modules-commonjs'],
['#babel/plugin-proposal-decorators', {'legacy': true}],
['#babel/plugin-proposal-class-properties'],
['#babel/plugin-proposal-export-default-from']
]
};
#babel/plugin-proposal-export-default-from does not help.
It did not compile files from node_modules directory. An ignore rule had to be set.
It works
Variant A babel-node
npx babel-node --ignore="/node_modules\/(?\!console-command-manager)/" --config-file ./babel.config.js ./src/index.js
I fault to move --ignore argument into ./babel.config.js
Variant B
Node executtion with -r runner.js
Execution
node -r ./runner.js src/index.js
Runner
const config = require('./babel.config.js')
console.log(config)
require("#babel/register")({
extensions: ['.js'],
ignore: [
/node_modules[\\/](?!console-command-manager)/
],
...config
});

How to correctly bundle a vscode extension using webpack

The problem that i am having is that when i run vsce package i still get the This extension consists of 3587 separate files. For performance reasons, you should bundle your extension: warning, i followed the Bundling Extension steps, debugging works as expected.
package.json
{
"main": "./out/extension",
"scripts": {
"vscode:prepublish": "webpack --mode production",
"webpack": "webpack --mode development",
"webpack-dev": "webpack --mode development --watch",
"compile": "npm run webpack",
"watch": "tsc -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
}
The webpack config is an exact copy of the Bundling Extension example.
This sounds like you might've forgotten to add the source directories to .vscodeignore, so they're still being packaged into the release. The ignore file should probably contain at least the following, plus anything else not needed at runtime:
src/**
node_modules/**
If you are working with a Language Server extension which has both client and server folders, If you exclude the node_modules of the client and server from the bundle the extension would fail when installed and launch for the first time
.vscodeignore contains
.vscode
**/*.ts
**/*.map
out/**
node_modules/**
test_files/**
client/src/**
server/src/**
tsconfig.json
webpack.config.js
.gitignore
Also the documentation is a bit obsolete regarding the webpack.config.js, you have to wrap the 'use strict' into a function with all the settings.
The entry setting was changed according to my needs
//#ts-check
(function () {
'use strict';
const path = require('path');
/**#type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
entry: './client/src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
output: {
// the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
clean: true, //clean the dist folder for each time webpack is run
libraryTarget: 'commonjs2',
devtoolModuleFilenameTemplate: '../[resource-path]'
},
devtool: 'source-map',
externals: {
vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
},
resolve: {
// support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
}
]
}
};
module.exports = config;
}());

grunt-sftp-deploy unable to connect to server

I am a noob to grunt and would like to start using it.
Here is my gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
devDir: 'dev/dir',
prodDir: 'prod/dir',
'sftp-deploy': {
prod: {
auth: {
host: 'server.com',
port: 22,
authKey: {
"username": "username1",
"password": "password2"
}
},
src: '<%=devDir%>',
dest: '/test/env/',
concurrency: 4,
progress: true
}
}
});
// load modules
grunt.loadNpmTasks('grunt-sftp-deploy');
// Default task(s).
grunt.registerTask('default', ['sftp-deploy']);
};
I am getting this error when i run 'grunt' in powershell:
Running "sftp-deploy:prod" (sftp-deploy) task
Logging in with username username1
Concurrency : 4
Fatal error: Connection :: error
What am I doing wrong?
thanks!
Ok, a few things to try... (sorry - a month late!)
run:
grunt sftp-deploy --verbose
This will give you a little more info regarding your error.
I solved my error after realising I couldn't create folders on my server, only upload files. So it might be worth testing that you can accomplish manually what your asking grunt to do.
Lastly, try moving your username / password into a .ftppass file
link [here] (https://www.npmjs.com/package/grunt-sftp-deploy)

Fatal error: This socket is closed. ('grunt-contrib-imagemin')

this is a gruntfile.json
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
imagemin: {
options: {
optimizationLevel: 3,
flatten: true ,
cache: false
},
build: {
expand: true,
cwd: 'public/images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/min'
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
};
and i got this error
Fatal error: This socket is closed.
and this is a full error details
Command-line options: --verbose
Reading "Gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Registering "grunt-contrib-imagemin" local Npm module tasks.
Reading C:\Users\Mohamed\Desktop\egwebstorm\node_modules\grunt-contrib-imagemin\package.json...OK
Parsing C:\Users\Mohamed\Desktop\egwebstorm\node_modules\grunt-contrib-imagemin\package.json...OK
Loading "imagemin.js" tasks...OK
+ imagemin
Loading "Gruntfile.js" tasks...OK
+ default
No tasks specified, running default tasks.
Running tasks: default
Running "default" task
Running "imagemin" task
Running "imagemin:build" (imagemin) task
Verifying property imagemin.build exists in config...OK
Files: public/images/facebook.png -> images/min/facebook.png
---- the list of other images -----
Options: interlaced, optimizationLevel=3, progressive, flatten, cache=false
Fatal error: This socket is closed.
and no image folder created or anything changed ,and i reviewed the code but i didn't know if there's something need to fixed
Try to re-install imagemin:
npm uninstall grunt-contrib-imagemin
npm install --save-dev grunt-contrib-imagemin