Wasted over 3 days of troubleshooting; have gotten nowhere further. Appreciate any assistance at this point. Here's my code:
var gulp = require('gulp'),
path = require('path');
gulp.task('prefix', function() {
var prefixer = require('gulp-autoprefixer');
gulp.src(path.join(__dirname, 'app/styles/assets/**/*.css'))
.pipe(prefixer({ browsers: [ '> 1%' ] }))
.pipe(gulp.dest('./');
});
I placed a single .css file in the specified source directory and added properties/values that would require prefixing, like: transform, column-count and the 'flex' value of the display property.
When run, gulp gives no errors, no file is modified, pretty much nothing happens. I've tried specifying a path to an output file, removing the options from the prefixer() call, hard-coding values into the .src() and .dest() methods, running the whole command in a singular file, inside a sequence runner, reinstalled the module, updated packages and more.
I've read the docs inside and out, am following them to a 'T', and even contacted the module author to look at my code, and he stated it looked fine to him. I simply cannot see what I'm doing wrong.
Related
So I’m trying to make a development environment that’s easily reproducible (staying away from home-manager currently to understand Nix better). After enough searching around I figured out how to make a few custom derivations, use buildEnv for package sets, and use ~/.config/nixpkgs/config.nix to do overrides. I’m working now to setup zsh and oh-my-zsh which have a ton of configuration options, but the only documentation I can find seems to suggest adding them to configuration.nix, which is a NixOS option I can’t use.
Currently my config.nix code looks something like this:
let
pkgs = import <nixpkgs> {};
in {
allowUnfree = true;
programs = {
zsh = {
enable = true;
promptInit = "source ${pkgs.zsh-powerlevel9k}/share/zsh-powerlevel9k/powerlevel9k.zsh-theme";
ohMyZsh = {
enable = true;
plugins = ["autojump"];
theme = "powerlevel9k/powerlevel9k";
};
};
};
packageOverrides = pkgs: with pkgs; rec {
all = buildEnv {
name = "all";
paths = with pkgs; [
tmuxinator
zsh
oh-my-zsh
autojump
...
];
};
};
}
My understanding so far is that within ~/.config/nixpkgs/config.nix, there should be a single config set which contains things like the overrides function and corresponds to documentation examples of config.programs.zsh.enable, etc. However, nothing I write in that programs section affects or causes a different ouput of any of my programs.
What am I missing? How can I affect the configuration options listed here (https://github.com/NixOS/nixpkgs/blob/master/nixos/modules/programs/zsh/zsh.nix)?
You seem to be trying to use home-manager's config without using home-manager itself. As you can see in the NixOS module you linked, this actually sets up /etc/zshrc etc, so it's not intended for use in a user-local config and won't do anything there. If you look at the corresponding home-manager module, you'll see that it basically reimplements the whole module for user-local purposes. So you won't get far with this approach without relying on home-manager.
Calling tsickle with
tsickle --externs=target/externs.js -- -p target/src
I get this error:
Error No inputs were found in config file 'target/src/tsconfig.json'. Specified 'include' paths were '["./my/pathes/**/*.ts"]' and 'exclude' paths were '["some/other/thing"]'.
Why? Considering that tsickle is only a wrapper around tsc, if I do an equivalent tsc call, it happens without any problem. Something must go bad in the tsickle-tsc interaction, but what?
According to this Github issue, there is some incompatibility between tsickle and the typescript.
The probable reason can be that neither side want to admit that it is their mistake, thus none of them wants to fix it.
The solution is this: either the tsconfig.json given to the tsickle should have an absolute path, or the include: in this tsconfig.json should use an absolute path.
Considering that the .json format is not a very configurable thing (for example, you simply can't give an include: [ __dirname + '/my/lib/**.ts' ] setting in it), the probably better option is to simply give an absolute path to the tsickle.
In my case, I simply extended an arguments: ['-p', 'src/tsconfig.json'] in my Gruntfile to arguments: ['-p', __dirname + 'src/tsconfig.json']. If you use a different build tool, your actual solution my differ from it, but it is the important part.
build pipeline is: Typescript, browserify, browserify-css, uglify.
runtime libraries: react, bootstrap.
My application so far has very little functionality (that's why I'm asking if this is going to bite me later, even though it appears to work for now). Later on it will get bigger (react-router, redux, other js libraries like Auth0, maybe even some actual functionality.)
I have an app.css that contains:
#import url("node_modules/bootstrap/dist/css/bootstrap.css");
I then import that into my index.tsx with:
import './app.css';
This all appears to work in that my helloworld react component displays "hello world".
But, during the build, uglify reports:
WARN: Output exceeds 32000 characters
Should I ignore it? And if so, is there a way to suppress it?
Looking at the file produced by uglify shows that it seems to make sure no lines are > 32000 characters - most lines truncate at just short of 32000 (one at 31999).
But there's one line var css='/*!\n * Bootstrap v3.3.7 ...' that is 120K characters long. I assume this is what Uglify is trying to tell me, but what's the big deal?
As per DavidG's comment, you can tell Uglify not to complain about this with the max-line-len option.
But, you can't just add that option, because it only works if you're "beautifying" the code. Which then does other stuff that you may not want to do.
The solution to that is to use the -b option to enable beautification, but then tell Uglify not to actually beautify. o_O
"scripts": {
"uglifyjs":"uglifyjs -b beautify=false,max-line-len=120000"
}
The above will set the line length to 120K - which made the warning go away.
This is more of a workaround than an answer though - it answers the "how do I suppress it" part of my question. I still don't know why it's warning me about that - problems with older browsers or whatever, I don't know.
I have a gulp workflow with a simple less task like so:
gulp.task('less', function() {
gulp.src(source_less)
.pipe(sourcemaps.init())
.pipe(less({
sourceMap: true
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(dest_less));
});
I want the gulp-sourcemaps module to display source maps as inline comments in my CSS file.
But whenever gulp compiles my LESS, the gulp-sourcemaps isn't displaying a path to my source file.
Instead, it displays something like this:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
I dramatically simplified my gulpfile, removing livereload, autoprefixer and such.
But even in this stripped down version I can't get the source URL to be right.
Been over this thing for quite some time now, any help would be very much appreciated!
You already have sourcemaps inline there. If you base64 decode what comes after sourceMappingURL=data:application/json;base64, you'll get this:
{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}
Try it yourself here: https://www.base64decode.org/
For those who stumble upon this post and are wondering how to get a separate file for the map that's is not in base64 format - you can pass a path relative to the destination.
For example:
.pipe(sourcemaps.write('./'))
The project I'm working on is using code to run the less compiler.
I'm having trouble adding an inline source map to the compiled css from my less files.
From node we are running the following code:
var less = require('less'),
options = {
strictMath: true
};
less.render(data, options, function(err, css) {
callback(err, css);
});
Is there an option I can add?
I've tried adding sourceMap: true and outputSourceFiles: true without success.
Since Less v 1.5 the compiler has support for the following options
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline puts the map (and any less files) into the output css file
--source-map-url=URL the complete url and filename put in the less file
The sourceMap and outputSourceFiles options you have tried seems to related to grunt-contrib-less, see: https://github.com/gruntjs/grunt-contrib-less