I'm working on a gulp task about compressing less and minify css, the only point it's troublesome is that I need some hardcoded 3 different variables in the 3 different environments(local, dev, prod) with 3 files.less. I swap the right version of right environment each time after deleting it (the original file).
And in the main.less file I include the original.less file.
(Mi english and explication skills doesn't bright)
gulp.task('before-less', function(cb) {
if(gutil.env.dev === true) {
gutil.log(' preprod environment \n'); gulp.src('path/to/dev.less').pipe(rename('original.less')).pipe(gulp.dest('path/to/css'));
} else if (gutil.env.prod === true) {
gutil.log(' prod environment \n');
gulp.src('path/to/prod.less').pipe(rename('original.less')).pipe(gulp.dest('path/to/css'));
} else {
gutil.log(' local environment \n');
gulp.src('path/to/local.less').pipe(rename('original.less')).pipe(gulp.dest('path/to/css'));
}
});
gulp.task('less', ['before-less'], function() {
gutil.log(' LESSing ');
gulp.src(rute + 'css/*.less')
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
})).on('error', gutil.log)
.pipe(minifycss()) // Minify
.pipe(gulp.dest(rute + 'css'))
// .pipe(notify({message : "Modifications LESS" }))
.pipe(connect.reload());
});
The task of less I think that runs correctly, but the question is when the gulp less include my file of original.less they should be read the var first or they include it first and later read the var?
I include my gulp task for someone have a better organization about this "problem"
I think you should considersubtasks or complete different tasks for your different situations.
The task of less I think that runs correctly, but the question is when
the gulp less include my file of original.less they should be read the
var first or they include it first and later read the var?
Less uses lazy loading and last declaration wins for variables, see also http://lesscss.org/features/#variables-feature-lazy-loading. The preceding means that if you declare the same variable again after your include it will override the variable everywhere in your code.
I find the solution with runSequence gulp package.
Because I find that Gulp can work synchronously and mi second task less begins after mi first task before-less and they fail and gives me an Error.
With runSequence I can do something like that:
var runSequence = require('run-sequence');
gulp.task('default', function(callback) {
runSequence('before-less', ['less'], callback);
});
source
finding more information about gulp synchronously this could be really good other option and more 'elegant node' (using callbacks).
Related
Task description
I want to make sure that no derivation I install has no run-time dependency on specified set of derivation. If I ask nix-env to install package that has such run-time dependency, I want it to say that I am asking for impossible. Build-dependencies are fine. I want to avoid huge cascade rebuilds, though.
In other words, I want to make sure that derivation with name = evil never reaches my Nix store, but I am fine that it was used to build other derivations on Hydra. Here is what I tried:
Failed attempt: use derivation meta attribute
self: super: {
evil = super.evil // { meta.broken = True; };
}
but this makes nix-env to refuse install programs that has build-time dependencies on evil, for example it refuses to install go or haskell programs (which are statically linked) because compiler has some transitive dependency on evil.
Failed attempt: replace evil with something harmless
I write overlay that replaces evil:
self: super {
evil = super.harmless; # e.g super.busybox
}
it causes major cascade rebuild.
Random idea
If there is function, like this:
self: super: {
ghc = forget_about_dependencies_but_retain_hash_yes_I_know_what_I_Do [super.evil] super.ghc;
# same for rustc, go and other compilers that link statically.
}
that would be 90% solution for me.
It seems impossible to prevent some derivation from being in store, but it is possible to make sure profile does not contain run-time dependencies:
self: super: {
world = (super.buildEnv {
name = "world";
paths = with super; [ foo bar baz ];
}).overrideAttrs (_: { disallowedRequisites = [ super.evil super.ugly ]; });
}
So, if you put all derivations you want in "world", you can be sure that evil and ugly are not in dependencies. But they will be downloaded into store to build "world", even if they are not actually used by any derivations in paths.
I know you're not supposed to do this, but I'm trying to write some tests with legacy code still using requirejs that have a few window variables floating around.
Basically I'm trying to write a mocha test and include some predefined global variables that a different file would use later. I'm trying to do the following, but it seems the global variable "container" isn't populated when accessing it later.
global.document = require('jsdom').jsdom('<html></html>');
global.window = document.defaultView;
global.$ = require('jquery')(window);
// this should be available everywhere as far as I can tell...
global.container= {};
global.window.container= global.container;
// legacy scripts still using requirejs, so we need to load the require config here
var requirejs = require('testing-setup').requirejs;
// chai is nice
require('chai').should();
describe('model tests', function () {
var model;
// before we begin the tests, we need to require in all the necessary modules
before(function (done) {
window.container= {
dateFormat: false
};
requirejs(['Model', 'common', 'date'], function (Model) {
// load some dummy data out of a file
model= new Model(require('./test-data.js').item);
done();
});
});
// run some more tests down here, I'll spare you those
});
The script being loaded called "common" above has a reference to the global "container" object that lives on the window. Apparently what I have is not correct. Is there no way to set up a shared global variable in jsdom? I know it's not the standard way of doing things, so please spare the lectures. Refactoring all that legacy code right now is not really a feasible option.
Ah, it turns out this is the correct way of doing it. It appears the jsdom/nodejs differentiate the difference between window and global. If you want something to be available everywhere in every file in that session, it needs to be on the global namespace. The window is explicitly window.
I have started learning Facebook's Flux architecture. I am trying to make a simple login screen. I have followed the flux-chat sample app to create the screen. I have a problem of circular dependency between ServerActionCreator and WebAPIUtils. Please see the code below.
ServerActionCreator.js
var AppDispatcher = require('../dispatcher/AppDispatcher');
var Constants = require('../constants/Constants');
var WebAPIUtils = require('../utils/WebAPIUtils');
var ActionTypes = Constants.ActionTypes;
module.exports = {
receiveLoginStatus: function(status){
AppDispatcher.handleServerAction({
type: ActionTypes.RECEIVE_LOGIN_STATUS,
status: status
});
},
loginSubmit: function(data){
WebAPIUtils.login(data);
}
}
WebAPIUtils.js
var ServerActionCreator = require('../actions/ServerActionCreator');
module.exports = {
login: function (data) {
//Mock server API call
var status = JSON.parse('{"status":"success"}');
ServerActionCreator.receiveLoginStatus(status);
}
};
As you can see ServerActionCreator depends on WebAPIUtils and WebAPIUtils depends ServerActionCreator.
I think, due to circular dependency WebAPIUtils becomes an empty object and I am getting "undefined is not a function" error when loginSubmit function in ServerActionCreator is called. Screenshot below.
How to handle this scenario? or Is there any alternative way? Any help is much appreciated.
Whenever you have a circular dependency between modules, a common solution is to either combine the modules or to create a third entity that will break the cycle.
In your case, I'd argue that you could move loginSubmit to a different action creators module. It's actually a user action, not a sever action, anyway. So maybe loginSubmit could go in UserActionCreators.js along with any number of other user action creator methods.
Another solution to your problem (and to circular dependencies in general) is to make your methods more pure, removing dependencies and instead passing in dependencies as arguments. So WebAPIUtils.login() could take a second argument, which would be the success callback. Thus:
WebAPIUtils.login(data, ServerActionCreator.receiveLoginStatus)
An always annoying problem i had with lessphp (and also less compiling in rails or python/django) is that it is only watching the file which to compile but NOT the imported files.
For example my less structure looks something like this:
// main.less
// (compiled to styles.css)
#import "variables"
#import "objects"
#import "theme"
.
// theme.less
// (actual styles)
body { background:#efefef }
So the actual compiled file is only the root to import the styles and files i work on. Everytime i make a change on my styles(theme.less) i have to edit the main.less so it gets recompiled.
Is there any option to check ALL files for changes like it does on client-side compile(less.js)?
When you inspect the source of the php lessc compiler, which can be found at https://raw.githubusercontent.com/oyejorge/less.php/master/bin/lessc, you will found that the script only evaluate the modification time of the Less file that you have passed as argument.
When you less files are in /home/project/less you can add for instance the following code inside the while(1) loop in bin/less, around line 125:
while (1) {
clearstatcache();
//keep original code here
$dir = '/home/project/less';
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
if(preg_match('/\.less$/',$filename) && filemtime($filename) > $lastAction)
{
$updated = true;
break;
}
}
if($updated) break;
}
I have just recently gotten into LessCSS and I am running into what I feel is major limitation and I was wondering if there was a way to do this?? I want to say I read somewhere that Sass allows for user defined functions but will LessCSS do the same?
What I'm wanting to do:
#fs: 16;
// either return the value
.s(#t,#s,#u) {
// return #t/#s*#u;
}
#elem {
margin-top: .s(30,#fs,1em);
width: .s(900,#fs,1em);
.child {
width: .s(100,900,100%);
}
}
// or have a property argument
.s(#t,#s,#u,#p) {
#{p}: #t/#s*#u;
}
#elem {
.s(30,#fs,1em,margin-top);
.s(900,#fs,1em,width);
.child {
.s(100,900,100%,width);
}
}
The only way I can figure it out, but it is very limited because I have to have multiple mixins:
.s(#t,#s,#u,#p) when (#p = margin-top) { margin-top: #t/#s*#u; }
// margin[-top|-right|-bottom|-left]
// padding[-top|-right|-bottom|-left]
.s(#t,#s,#u,#p) when (#p = width) { width: #t/#s*#u; }
.s(#t,#s,#u,#p) when (#p = height) { height: #t/#s*#u; }
I know I can always modify the less.js file to add a spacing function like the built-in round() or ceil() function. But, that kills the option of compiling the .less files for production using LessPHP, Crunch, SimpLess.
As far as I know, there's no property argument: you must write it down.
That is, a function will return a calculated value or instruction(s) (property/ies and calculated values).
There aren't thousands of properties in CSS, it's not a CMS with hundreds of classes and functions, so your list won't be as long as you can imagine. You should use other CSS preprocessors or a backend language to generate your CSS if you want to do such complicated things. Or better keep it simple.
That said, lessphp allows for user functions:
lessphp has a simple extension interface where you can implement user functions that will be exposed in LESS code during the compile. They can be a little tricky though because you need to work with the lessphp type system.
Notice that you also can easily add custom functions to the default Less compiler, which enable you to use the client side less.js compiler for testing and the command line lessc compiler for production.
For Less 1.x
Download and unzip the source from github at: https://github.com/less/less.js/releases/latest
Run npm install
Open the lib/functions.js file
Add your custom function (returncenter() in this example) inside the tree.functions object, for instance as follows:
tree.functions = {
returncenter: function() {
return new(tree.Anonymous)('center');
},
//original function below
}
Run grunt dist
After the preceding step you can include dist/less-1.x.x/js in your HTML or compile your Less code with the dist/lessc compiler.
For Less 2.x
Download and unzip the source from github at: https://github.com/less/less.js/archive/master.zip
Run npm install
Create a file caleld lib/less/functions/custom.js and write down the following content into it:
var Anonymous = require("../tree/anonymous"),
functionRegistry = require("./function-registry");
functionRegistry.addMultiple({
returncenter: function() {
return new(Anonymous)('center');
}
});
Open the lib/less/function/index.js file and append require("./custom"); to the list of register functions, just before return functions;
Run grunt dist
Now you can use the following Less code:
selector {
property: returncenter();
}
The preceding Less code will compile into the following CSS code:
selector {
property: center;
}