We are in need of a solution to compile SCSS and deploy to a remote server.
We have tried using both Grunt and Gulp setups but it appears that the FTP plugins for both are no longer compatible with newer versions of Grunt/Gulp.
We have also tried WebPack today which we like, but we're not sure how to deploy the compiled files.
We are needing to do it this way as it takes too long to download a copy of a clients site, make a small style change locally and reupload. We do want the benefits of using sass therefore we need a local solution to compile our styles and then deploy them to a specified folder on the server.
Our ideal workflow would be to make a change to a scss file (JS in the near future), a background task would see the change, compile it to css and another tasks would see that and deploy it to the correct remote folder.
Any ideas?
Thanks,
Neil
A small example of how you can recompile scss to css and upload to the server via ftp
Folder structure below and the normal call to node indes.js and that's it ;)
.
├── index.js
├── output.css
├── package.json
├── style.scss
└── yarn.lock
const fs = require('fs');
const sass = require('node-sass');
const ftp = require("basic-ftp")
const pathTotheFile = './output.css';
// compile scss
sass.render({
file: __dirname + './style.scss',
outputStyle: 'compressed',
outFile: __dirname + pathTotheFile,
// sourceMap: true,
}, function (error, result) {
if (error) {
console.log(error.status);
console.log(error.column);
console.log(error.message);
console.log(error.line);
} else {
console.log(result.stats);
fs.writeFile(pathTotheFile, result.css, function (err) {
if (!err) {
uploadCSStoServer();
}
})
}
});
// copy file to server
async function uploadCSStoServer() {
const client = new ftp.Client()
client.ftp.verbose = true
try {
await client.access({
host: "myftpserver.com",
user: "very",
password: "password",
secure: true
})
console.log(await client.list())
await client.uploadFrom("README.md", "README_FTP.md")
// await client.downloadTo("README_COPY.md", "README_FTP.md")
}
catch (err) {
console.log(err)
}
client.close()
}
Related
I'm attempting to have a folder called 'Uploads' in my vue public folder. However, whenever I build the project using npm run build. It removes all files from the public folder and rebuilds the project deleting any additional folders added. Is there any way I can tell the vue-config.js to leave a specific folder in the public folder?
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
const path = require('path');
module.exports = {
outputDir: path.resolve(__dirname, './server/public'),
devServer:{
proxy:{
'/api':{
target:'http://localhost:8080/api/posts/'
}
}
}
};```
in subfolder /blog can i change index.js file for example to _blog_index.js and it will be read as index.js?
each subfolder has index.js file and sometime is difficult to read in code editor, when i have many subfolders and many tabs open.
Thank u
This is possible when using rewrites() in next.config.js:
const nextConfig = {
async rewrites() {
return [
{
source: "/blog",
destination: "/blog/_blog_index",
},
];
},
};
module.exports = nextConfig;
However, keep in mind that rewrites() won't be supported if you're planning to export your app to static HTML because it requires a Node.js server.
How can I know in babel plugin whether files currently transpiled by babel are transpiled for server or client/browser package?
Meteor recently implemented option caller available in babel 7. To use it and access information in plugin, one can access Babel.caller poperty like this:
let caller;
module.exports = function(Babel) {
Babel.caller(function(c) {
caller = { ...c };
});
return {
visitor: {
BlockStatement(){
console.log(caller); // logs e.g. {name: "meteor", arch: "web.browser.legacy"}
}
}
};
};
I am at a loss as to why the less task fails silently. If I run it using grunt-cli and Gruntfile.js it works fine, but when I try to port it into another script the less task does not generate any output. Any help or insight as to why would be greatly appreciated.
'use strict';
var grunt = require('grunt'),
_ = require('underscore'),
path = require('path'),
fs = require('fs'),
dir = require('node-dir');
var cssSrc = [];
var cssPaths = [];
var templates = [];
dir.paths('repo', function (err, paths) {
if (err) {
throw err;
}
_.each(paths.files, function (file) {
if (path.extname(file) === '.less') {
cssSrc.push(file);
}
});
cssPaths = paths.dirs;
grunt.task.loadNpmTasks('grunt-contrib-less');
grunt.initConfig({
less: {
options: {
paths: cssPaths
},
files: {
'tmp/target.css': cssSrc
}
}
});
grunt.task.run('less');
});
The dependencies implicit to grunt-cli:
nopt
findup-sync
resolve
are not explicitly included in a standalone script.
The Gruntfile.js script contains the path information:
repo paths found using the dir.paths callback
tmp/target.css paths found using _.each
.less source paths found using paths.dirs
and uses the dependencies to do pathfinding.
There are unrelated questions about running less via Rhino and wsh which explain the parameters for doing path finding explicitly.
References
npm: less
npm: grunt-cli
npm scripts man page
grunt-cli source
less: Third Party Compilers
We are using NodeJS to build our project. We have integrated LESS CSS as a part of the project. We are attempting to keep our build clean and would like to be able to call the lessc command (or something comparable) in order to build our LESS files.
The LESS documentation isn't very in depth, but wanted to reach out to the community to find a solution. Google has not be too helpful to me on this topic.
We have a build.sh file, that calls various other build.js files (in respective directories). How can I run LESSC to compile my LESS files?
Using node.js
var less = require('less')
,fs = require('fs');
fs.readFile('style.less',function(error,data){
data = data.toString();
less.render(data, function (e, css) {
fs.writeFile('style.css', css, function(err){
console.log('done');
});
});
});
Few years later ... less#3.9.0 returns output as:
{
css: 'rendered css',
imports: ['source.css']
}
Updated code can look like this:
const outputFile = 'style-iso.css';
const data = `.bootstrap-iso {
#import (less) "style.css";
} `;
less.render(data, { strictMath: true }).then(
output => {
fs.writeFile(outputFile, output.css, err => {
if (err) {
throw err;
}
console.log(`${outputFile} saved!`);
});
},
err => {
console.error(err);
});
Tip
strictMath: true
is necessary if you want to render bootstrap.css