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
Related
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()
}
I am using YO lessapp project, "grunt-contrib-connect" helps me to start a node js server on 9000 port. Whenever I run grunt serve (start the server) the service is aborted due to the below warning.
Running "connect:livereload" (connect) task
Warning: connect.static is not a function Use --force to continue.
The exact error took place in the below function in Gruntfile.js
livereload: {
options: {
middleware: function(connect) {
return [
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
I have installed
npm install grunt-contrib-connect --save-dev,
npm install serve-static --save-dev
I came across few post, some suggest to turn off the firewall but no luck.
I know there is something to do with my machine or npm/node/connect version conflicts, because I tried to run the same app from other machine and it works fine.
System configuration :
Windows 7 Professional
Node -v4.1.2
npm -v2.14.4
connect#3.4.0
I have installed connect and serve-static based upon the post nodejs connect cannot find static, but still the same
Any help? Thanks in Advance
You have to install connect and serve-static:
npm install --save-dev grunt-contrib-connect serve-static
And then you have to import serve-static in Gruntfile.js:
module.exports = function (grunt) {
...
var serveStatic = require('serve-static');
grunt.initConfig({
...
connect: {
...
livereload: {
options: {
middleware: function(connect) {
return [
serveStatic('.tmp'),
connect().use('/bower_components', serveStatic('./bower_components')),
serveStatic(config.app)
];
}
}
}
From version 0.11.x, the new grunt-contrib-connect does not support connect.static and connect.directory.
You should install serve-static(for serve static files) and serve-index (for Serves pages that contain directory listings for a given path).
like this:
var serveStatic = require('serve-static');
var serveIndex = require('serve-index');
Use serveStatic instead connect.static
and
serveIndex instead connect.directory
grunt.initConfig({
connect: {
options: {
test: {
directory: 'somePath',
middleware: function(connect, options){
var _staticPath = path.resolve(options.directory);
return [serveStatic(_staticPath), serveIndex(_staticPath)]
}
}
}
}
})
I have written a following file grunt.js
var _path = require('path');
module.exports = function (grunt) {
var config = {
};
function addProject(project) {
grunt.helper('addProject', config, project);
}
addProject({
name:'mytest',
type:'module',
sourcePath:'../source',
outputPath:'../test/',
version : grunt.option('ver')||'0.1.0.0'
});
grunt.registerTask('default', 'module closureCompiler');
grunt.initConfig(config);
};
when i run it using a command in my bat file module closureCompiler sync, it gives an error saying
Running "sync" task
>> No "sync" targets found.
<WARN> Task "sync" failed. Use --force
What does this mean?
As the error message points out you need to define a target for the sync task:
grunt.initConfig({
sync: {
target: {} // <= needs to be defined
}
});
In a NodeJS application ,I have finished some modules,Now I want to use them in Meteor,What should I do?
For example,there is a file 'hello.js',content:
require('url');// In here,require other modules
function sayHi(name){
console.log("Hi "+ name);
}
exports.sayHi = sayHi;
How do I use 'say Hi' in meteor?
when I do this:
if (Meteor.isServer) {
Meteor.startup(function () {
var require = __meteor_bootstrap__.require;
var index = require('./hello');
hello.syaHi('Ec');})}
Errors is:
app/index.js:1
require();
^
ReferenceError: require is not defined
at app/index.js:1:1
at /home/huyinghuan/workspace/NodeJs/myMeteorJS/testrequire/.meteor/local/build/server/server.js:113:21
at Array.forEach (native)
at Function._.each._.forEach (/usr/lib/meteor/lib/node_modules/underscore/underscore.js:79:11)
at run (/home/huyinghuan/workspace/NodeJs/myMeteorJS/testrequire/.meteor/local/build/server/server.js:99:7)
I think, you have to install/copy your module into projectdir/.meteor/local/build/server/node_modules which is a link to /usr/local/meteor/lib/node_modules. I tried this with the node.js module tracer and it worked. You have to copy your files into this directory every time you updated your meteor installation.
Also, it looks like Npm.require() is the right way to require node modules now.
Update, I had to install my module into .meteor/local/build/programs/server/node_modules as well as use Npm.require.
Here's a package which makes it a lot easier to use NPM packages inside Meteor:
https://github.com/meteorhacks/npm
example usage:
if (Meteor.isClient) {
getGists = function getGists(user, callback) {
Meteor.call('getGists', user, callback);
}
}
if (Meteor.isServer) {
Meteor.methods({
'getGists': function getGists(user) {
var GithubApi = Meteor.npmRequire('github');
var github = new GithubApi({
version: "3.0.0"
});
var gists = Async.runSync(function(done) {
github.gists.getFromUser({user: 'arunoda'}, function(err, data) {
done(null, data);
});
});
return gists.result;
}
});
}
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