I need a simple npm script to have includes in my html file to make it modular, it shouldn't be a gulp/grunt/webpack plugin, just a regular npm-lib, like node-sass or whatever.
I tried to use nunjucks/twig/html-importer - they all haven't any watch options, so if you know what I'm seeking - sharing would be appreciated!
UPD: or maybe if anyone has any ideas how to watch nunjucks templates and run build on changes - I will be happy to see your solution as a line of npm-script. nunjucks-cli doesn't work.
Ok, I've found a solution.
I still used nunjucks-cli, but I used to play with paths, and looks like they were required to be written in quotes, instead of example's version, so script "nunjucks -w -u '*.tpl' -o ./" works fine
Related
Is it possible to format HTML automatically with a tool in a similar way that eslint formats javascript? Why does it seem that there isn't many customizable options that you can integrate as part of your development pipeline?
I would wish to format HTML in the following way automatically with a command ran from the terminal:
<input
class="input-style"
placeholder="Replace me!"
/>
So for example I could npm run html-lint and it would fix the syntax in html files and warn about cases it cant fix.
js-beautify also works on HTML.
npm install js-beautify
js-beautify --type html file.html
Notice all this beautifying makes the file size increase substantially. The indentation is great for revision and editing, not so much for hosting. For that reason you might find html-minifier equally useful.
I personally think tidy is a fantastic options for tidying up HTML files. Checkout Tidy
maybe what you are looking for is prettier, this also supports CLI, even you can also make config, see the complete documentation here. Prettier CLI
I hope this helps.
I Googled for "Package json pretty print html" and got the following:
https://www.npmjs.com/package/pretty
(It's not clear whether this can be included in package.json)
There's also this (appears to be a command-line tool):
https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
Using ammonite 0.7.0 using cd! in scripts would change you to that directory and execute the following bit of code, which was great as i've been using ammonite for build & deploy of a scala project.
But in 0.7.8 this does not work any longer, it fails like...
cat TestCd.sc
import ammonite.ops._
import ammonite.ops.ImplicitWd._
cd! root/'Users/'jeff
Error:
TestCd.sc:4: not found: value cd
val res_2 = cd! root/'Users/'jeff
I can make it work in this (very) small test by changing the code to import and instantiate a ammonite.shell.ShellSession, but that leads to other issues.
I've asked on gitter and in github issues, thought i'd cast a wider net as i've not received responses.
Thanks in advance, i don't want to stay on an old version or rewrite the deployment script in a more mature scripting language, as I'm using scala for other things, and feel this is critical to writing shell scripts in any language.
Jeff
While it would be nice if this just worked. An item I missed is that you can install a custom ~/.ammonite/predefScript.sc, and this is how i've gotten around the issue. The contents is identical to predef.sc without the final line. Feel free to grab it from this gist if you need this as well.
predefScript.sc - Gist
Add it to your system with
mkdir -p ~/.ammonite && curl -L -o ~/.ammonite/predefScript.sc https://git.io/v1vv7
I am new to gulp and i am getting object expected gulp error, but found solutions as rename file to gulfile.js
1) Need to understand every project has only one gulp file thats gulpfile.js? If i need to define more than one then how to and what will be the file name.
2)My requirement is to concatenate more than one less(convert to css) & js file into one and then apply it to index.html
3) I am using express to create gulp project structure. is this standard way? if no then how do i?
4) everytime i create gulp skeleton, do i need to install all packages again for every project?
Any references from where can learn gulp from basic.
I think one of the reasons you're getting downvoted is that on SO each question should be one question. This should really be four separate questions. Another reason is you haven't provided any of your code - add code (the { } icon) and include your gulpfile.js and your package.json.
1a) Yes, it has to be called gulpfile.js
1b) If you search SO and google for "multiple gulpfiles" you'll get a lot of solutions. If none of them work for you, let us know what you tried and what went wrong. But just so you know, it's better to start with just one gulpfile - it can be hard to get multiple gulpfiles working correctly, and using just one will help you learn gulp.
2) you'll need to use gulp-less and gulp-concat to turn multiple LESS files into one CSS file, and gulp-concat again to turn multiple js files into one.
3) You can use express, but you don't have to do. It depends what you're doing, and we have no idea what you're doing.
4) Not sure what you mean by "gulp skeleton". If you mean "Do I need to run npm install for every new project, yes you do.
5) Google "learn gulp"
6) If an image could just be text, it's better to just include the text.
If you need to, open new specific questions. For more on writing a great SO question, see https://stackoverflow.com/help/how-to-ask
So for a particular CGI perl script I have included JSON like this to handle some .json files:
use lib "./modules/JSON/lib";
use JSON;
This works fine and well. The web directory holds the files required in the modules folder.
However, the JSON module is very slow. I read that JSON:XS can be much, much faster but I can't seem to simply use it as so:
use lib "./modules/JSON-XS";
use JSON::XS;
There is no lib folder in the JSON-XS files, i've tried combinations of use (ie, using both folders and etc) but it didn't work.
And no I cannot simply install the module for this particular project.
Any help is appreciated.
And no I cannot simply install the module for this particular project.
You can't use a module without installing it. You've just been getting away with doing a half-assed job of it. That won't work for JSON::XS, though. The reason it's fast is because it's written in C, so you'll need to compile the C code. The easiest way by far to do this is to use the provided installer instead of reinventing the wheel.
(You do know you can install a module into any directory, and that this does not require special permissions, right?)
Perl distributions are usually usable in an uninstalled state. What you just need to do is to call perl Makefile.PL && make (or for a Module::Build-based distribution: perl Build.PL && ./Build). This will do all necessary compilations (if it's an XS module) and copy the library files into the blib subdirectory. In your script instead of use lib you would write use blib:
use blib "/path/to/JSON-XS";
Note that if a module has dependencies, then you have to resolve it yourself and add that many use blib statements. JSON::XS does not have that many dependencies, but it will be really inconvenient for other modules. In this case you should probably seek another solution, e.g. using CPAN.pm together with local::lib.
Okay this finally worked for me:
I did this process to all the dependencies (in the order of no dependencies to more dependencies)
export PERL5LIB = ~/path/to/modules/perl5
perl Makefile.PL PREFIX=$PERL5LIB LIB=$PERL5LIB
make
make test
make install
This installed all modules into a directory I called perl5. It also means that when you try to install other modules locally the dependencies issue does not appear due to the PREFIX/LIB additions.
Then all I did was add this to my perl CGI script:
use lib "./modules/perl5";
use JSON::XS;
PS: JSON::XS is so much faster!
:D
I'm cleaning up CSS from a previous designer. The file is messy. One example I'm pretty sure is redundant, I'd just like a confirmation to ease my conscience.
body h2{...}
Declaring just h2 would be sufficient here, right?
You would use body h2{...} only if you wanted to override an existing h2 {...} declaration. Declaring h2 on its own is perfectly acceptable otherwise.
To auto detect redundant and unused CSS classes, try using this library: css-checker.
It helps to scan your codebase automatically by one command: 'css-checker'. I think it's always better to rely on automatic code checking tools than read all codes manually to find improvements.
The css-check can scan your CSS code along with your js/jsx/html/ts/tsx code to find unused CSS code (optional).
Install
You can access to the package via go install:
go install github.com/ruilisi/css-checker#latest
(With go version before 1.17, use go get github.com/ruilisi/css-checker). Or download from releases
Or from npm:
npm install -g css-checker-kit
Start Checking
cd to your Project Path. Then just run:
css-checker
It can scan your code and give you feedback like this image: demo result
You can also add ignore paths like this: css-checker -ignores=node_modules,packages,*.spec.ts.
To check unused CSS classes (beta), use: css-checker -unused
But anyway, the css-checker helps in checking my projects in seconds, and provides hundreds of similar and redundant classes for me to improve. You can check out the package from the Github link: css-checker