I've been trying to incorporate the lessc compiler in a large project that has the basic setup from Bootstrap and it only results in various compileerrors (for which there are tickets for everyone with different solutions).
Not one solution give me what I want, which is a way to compile the less-pile through the command line.
I compile various other assets through node.js and hoped to do the same thing with the less, but every googlepage I find on the subject is Node.js+Express which is not what I want. I want a standalone compiler. (Idea: require.js r.js-file)
I found Node-less but it hasnt seen a update in 2 years and as such isnt ideal.
So. Question: Is there a commandline way to compile less-files with node.js? Ideal impl:
node compiler.js build.js
where build.js is a file with path to bootstrap.less and everything else needed.
Example of a r.js config file:
({
baseURL : "../assets",
mainConfigFile : "../assets/main.js",
name : "../assets/main",
out : "../assets/main.optmin.js",
optimize : "uglify"
})
Here is how to use node and less to output to a file:
node path/to/less/bin/lessc -x -O2 path/to/assets/main.less > path/to/output.css
-x : compress
-O2 : optimization mode
which creates output.css from main.less. Might be simple but I havn't found this ANYWHERE on the net. That line can be incorporated in a deployment-script.
Related
I have written a sveltekit app that I would like to deploy for instance on AlwaysData.
On the AlwaysData servers I can use up to 100Mo. I thought this would be plenty for the very small app I have written. But it is not the case : my app is more than 400Mo.
I looked into it and noticed two things :
after building the app, there still remains a node_modules folder that is not bundled into the app.
this node_modules folder is more than 400Mo although I only use a few simple libraries.
Hence my question:
is there a way to bundle the node_module packages into my app? This would keep only the necessary stuff which is only a few kilobytes.
or is there a way to tell javascript to import the minified version of the package in the dist folder when in production.
Following are the libraries I use and the size they should be according to bundlephobia :
#primsa/client : 233B
#supercharge/request-ip : 3.8kB
axios : 17.6kB
ramda : 53.4kB
sprintf-js : 3.5kB
So how does an app that should take less than a 100kB end up taking 400MB ? Even from an environmental point of view, this looks a bit annoying...
You only need to deploy the build folder nothing more.
Ive created a library that helps to trace an object state using rx streams and
Im trying to publish it to npm community.
you can check this out In my github repo
I want to compile my library to a single Javascript file and also create a declaration file ".d.ts" for Typescript users.
As i understand, when running $ npm publish i release my entire repository. what i want is to release the dist folder with the library source and declaration file and so the end users will be able to debug my library if necessary through their code so i need also source map.
So first i need to compile my src directory to a single javascript file and i have 2 ways to do so, using tsc or with webpack.
What ive tried so far and you should know:
I used module alias, configured in tsconfig.json.
I separated the library's bussiness logic to multiple files.
I wanted to import internal library's modules using "#lib" prefix.
so in my tsconfig.json i added:
"paths": {
"#lib/*": [
"src/*"
]
},
That alone cause some problems.
first of all running the command:
$ tsc src/index.ts
doesn't work at all and it shows me an error:
src/index.ts(3,15): error TS2307: Cannot find module '#lib/state-traceable'.
src/index.ts(4,15): error TS2307: Cannot find module '#lib/traceable-decorator'. src/index.ts(5,15): error TS2307: Cannot find module '#lib/effect-decorator'.
src/index.ts(6,15): error TS2307: Cannot find module '#lib/meta'.
yet running the command:
$ tsc
does actually works but it compiles each source file and create declaration file for each one of them.
Additionally, it preserves the path alias "#lib/*" instead of compiling it to something javscript compatible with relative paths "../", "./" etc...
Using webpack:
I succeed to bundle all my library sources to a single file and get rid of the "#lib" prefix however im not able to create a single declaration file.
im using "awesome-typescript-loader" plugin for webpack.
I created an issue, thought its a bug but i yet received any response from them:
https://github.com/s-panferov/awesome-typescript-loader/issues/559
Also tried to get some help from Gitter chats, Typescript community, "awesome-typescript-loader" library has no dedicated chat but couldn't find any useful information. Most of the examples ive seen, Typescript library publishers used to create a single file in their source directory: "index.ts" and it makes life easier because you can use tsc and compile that single file to a javascript file.
I hope i will find salvation here.
Some general info about the environment itself:
OS: Windows 10 Pro
Node Version: 9.5.0
npm version: 5.6.0
webpack version: 4.2.0
Please use the path configuration like below
"paths": {
"#lib/state-traceable": ["src/state-traceable.ts"],
"#lib/meta": ["src/meta.ts"],
"#lib/effect-decorator": ["src/effect-decorator.ts"],
"#lib/traceable-decorator": ["src/traceable-decorator.ts"],
"#lib/contracts/*": ["src/contracts/*"],
"#lib/utils/*": ["src/utils/*"],
"#lib/rx-operators/*": ["src/rx-operators/*"]
},
I have more than javascript files in my html documents as external which I'd like to combine on account of not to be crowded. is there any way to combine my js files ? for example;
my files:
a.js
b.js
c.js
d.js
and i want;
all.js
Take a look at requirejs.org and especially look at r.js (http://requirejs.org/docs/optimization.html)
a.js
var i=0;
function fun1()
{
...
}
b.js
var k=0;
function fun2()
{
...
}
all.js just copy, paste like css
var i=0;
function fun1()
{
...
}
var k=0;
function fun2()
{
...
}
take care of semicolons and closed braces when you purticularly write whole script in an eventlistener, especially 'DOMContentLoaded'
document.addEventlistener('DOMContentloaed',function()
{
//whole big script
}
);
instead use
document.addEventlistener('DOMContentloaed',some_function);
var some_function = function(){*bla bla bla*};
A simple bash cat operation will do what you want, but, at some stage you're probably going to want more right?
Grunt and Grunt-contrib-concat is a good starter, but you'll quickly realise grunt is not particularly good. To summarise usage, you create a gruntfile, install a few dependencies (i.e. install grunt and its command line interface, this is easy) and run grunt from your project root. It then parses the gruntfile to find out what you want it to do, and it does it. Pretty simple, and simple is good.
Next up is Gulp, which is a nice build system using streams, so, slightly more complex (well, easier and more powerful but, streams can be kind-of confusing at first). Gulp works in the same way only it parses a gulpfile for instructions. For a concat operation the actual gulp command is trivial:
gulp.src( '*.js' )
.pipe( gulp.dest( 'all.js' )
Between the .src and the .dest you can pipe the files through multiple transforms, such as minifying, transpiling, notifying—the list of plugins and modules is dizzying (as it is for grunt).
However, if you’re a fan of node and npm (you probably should be) then you can use npm scripts to create a build system. npm is the node package manager and requires a package.json to give some clues as to how to work. Part of that json specification is a scripts block
"scripts": {
"build" : "cat *.js > all.js"
}
You can then use npm run build from the command line, whereby npm will parse the package.json and execute the script using bash (sh actually).
Note that these are build systems, and there are many others.
There are also other packagers (which you would probably use as part of your build system, although for some projects they are you entire build system) but they are more complex than your needs, for your own research browserify, webpack and jspm are all excellent (bare in mind AMD modules lost so require.js is probably not worth your time), although this area is becoming congested. Each of these are very powerful modularisation tools, but they will require some changes to how you structure your code. If you are serious about modularisation then they are worth your time learning.
On a slightly different tangent, there is some discussion about whether one large file is actually more beneficial than a number of smaller scripts. In many cases simply serving a few small files is actually quicker, and may be easier, although there can be other benefits of smashing code together. Currently it is probably still best to concat at least into less HTTP requests, but this requirement for performance is going away.
It might be helpful : https://github.com/mrclay/minify
OR
create file all.js and paste a.js,b.js,c.js,d.js file code
I am using Visual Studio 2015 with Typescript 1.5.4 and Resharper 9
This is the buggy scenario:
I have about 180 typescript files
I change single .ts file
VS shows message "Generation of XXX.ts file complete. Remaining files still compiling"
after that ALL my .ts files are compiled to .js
2 things were changed in those .js files: formatting is slightly different and reference for .js.map was removed
When I build the whole project, then the .js files are generated again but with original formatting and with link to .js.map present
This is annoying because it generates too much noise in Git
and it prevents me from debugging typescript files directly in browser. (because of that missing .js.map file)
The desired behaviour is of course that the only changed .ts file should be compiled on save. How to do it?
It seems that R# has nothing to do with this, because it continues to happen with R# disabled.
My current project settings:
-------------UPDATE-------------
I've tried to update to Typescript version 1.6.
The PATH variable pointed to C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.4\ so I've updated that to point to 1.6
So when I now type tsc -v it says message TS6029: Version 1.6.2
But because of historical reasons (the project I work on is about 2 years old) I have to use version 1.4 inside VisualStudio. So in the .csproj is <TypeScriptToolsVersion>1.4</TypeScriptToolsVersion>
After this change the compile on safe stopped working completely.
Now I have to rebuild the whole solution :(
It seems that Visual Studio does not support watch mode properly (i.e. incremental compilation):
Just to be clear, --watch does work on Windows if you're using
node.js/io.js, but the tsc.exe program distributed with VS does not
support it; you still have Compile on Save for similar functionality
anyhow.
https://github.com/Microsoft/TypeScript/issues/2375#issuecomment-100812347
I'm not sure why this was closed. Supporting --watch for our tsc.exe
host would both be possible and desirable. Right now the limiting
factor is that our tsc.exe host is a bit of ugly C++, that uses some
ancient COM interfaces for Chakra that we haven't spent much effort
on. Our options are: [...]
https://github.com/Microsoft/TypeScript/issues/2375#issuecomment-100949019
As a workaround, could you run
tsc --watch
in the folder where tsconfig.json is located?
Edit: https://github.com/Microsoft/TypeScript/issues/5638 - Visual Studio 2015 compiles ALL typescript files when SINGLE file is changed
Starting with VS 2015 RTM, Compile-on-Save, every time you save a file
we need to generate all files in the project to ensure consistent
output. We have got numerous issues related to inconsistent output
when saving files in different orders. Building all files is the only
way we can guarantee correct and consistent output given all the
language constructs and how they interact across files (e.g.
namespaces/internal modules can be augmented, and that affects the
shape of emitted code, also const enms are in lined as constants,
etc..).
Try "ECMAScript 5" instead of "ECMAScript 3" in "ECMAScript version
I had a similar issue, but since we were handling TS compilation on our own, I wanted to avoid auto-compilation at all...
The fix was to force the TypeScriptCompileOnSaveEnabled flag to false inside the project:
<PropertyGroup>
<TypeScriptCompileOnSaveEnabled>false</TypeScriptCompileOnSaveEnabled>
</PropertyGroup>
in my case this effectively stopped VS2015 from automatically compiling the .ts files on save, without VS getting into the way every time and messing up outputs...
Another work around: You could use Gulp to generate your compiled js files and maps. With Gulp you can also create a watch task to compile at a save of a ts file. You can even create clean tasks to clean up the project.
Example of a build task:
var tsProject = ts.createProject(paths.typescriptRoot + 'tsConfig.json'); // use tsconfig.json
gulp.task("tsbuild", function () {
var tsResult = tsProject.src()
.pipe(sourcemaps.init()) // needed to create sourcemaps
.pipe(ts(tsProject)); // use tsconfig.json
return tsResult.js
.pipe(concat(paths.concatTsFileName)) // concat all output files into a sings js files
.pipe(sourcemaps.write()) // write the sourcemap to be able to debug the ts files
.pipe(gulp.dest(paths.typescriptOut)); // output the result on specific path
});
Example of a cleanup task :
gulp.task("clean:tsout", function (cb) {
rimraf(paths.typescriptOut + paths.concatTsFileName, cb); // rimraf is used to delete a folder
});
gulp.task("clean:scriptjs",
function () {
return gulp.src(paths.typescriptJs, { read: false }) // to clean up multiple files we need to use gulp-rimraf
.pipe(gulpRimraf());
});
Example of a Watch task:
gulp.task("watch:tsbuild", ['tsbuild'], function () {
gulp.watch(paths.typescriptRoot + '**/*.ts', ['tbbuild']);
});
I'd like to be able to install Javascript dependencies through bower and use them in a sails.js app, but I can't figure out a way to do this with out just copying an pasting files from the bower_components folder to the Sails assets folder.
Ideally I think I'd like to use requirejs and point to the bower components in the main.js file. I may be trying to pound a square peg in a round hole, please let me know if so. Any thoughts on managing components/libraries with Sails are welcome.
In Sails 0.10 the 'assets/linker' directory no longer exists, however I found a lead on simple solution that gives some automation to the bower -> asset linker workflow while also allowing some granular control over what exactly ends up getting linked.
The solution is adding grunt-bower to your Sails.js compileAssets task
grunt.registerTask('compileAssets', [
'clean:dev',
'bower:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev'
]);
Then configure your grunt-bower task like so (as tasks/config/bower.js):
module.exports = function(grunt) {
grunt.config.set('bower', {
dev: {
dest: '.tmp/public',
js_dest: '.tmp/public/js',
css_dest: '.tmp/public/styles'
}
});
grunt.loadNpmTasks('grunt-bower');
};
This will automatically copy your bower js and css files to the proper place for Sail's asset linker to find and automatically add to your project's layout template. Any other js or css files will still automatically be added after your bower files.
However this is still no silver bullet as this setup has 2 big caveats to it:
1 - The files that are added through bower-grunt have to be listed in bower.json's main array. If you see a file isn't being loaded you would expect to be, you must either edit that packages bower.json file OR add the dependency manually through grunt-bower's packageSpecific options.
2 - The order of bower files in the asset linker is currently alphabetical. My only recourse to adjust this order so far is tinkering around with an additional grunt task to manually re-order files prior to the rest of Sail's compileAssets task. However this one I'm confident there is something grunt-bower could do by supporting package copy ordering.
Note: the following answer is no longer completely relevant to the current version of SailsJS because there is no support for the linker folder as of SailsJS 0.10.
See: Sails not generating linker
Original answer:
I was able to figure out a solution for this, which is actually pretty simple. I had not realized you could configure where bower places it's files.
Create a .bowerrc file and change the directory where bower components are installed, in the case of Sailjs they should be put into the assets folder.
/*
* Create a file called .bowerrc and put the following in it.
* This file should be in the root directory of the sails app.
*/
{
"directory": "assets/linker/bower_components"
}
Sails will then use grunt to copy them to the .tmp/public/assets folder whenever a file is change. If you don't wish to have sails continually deleting and then recopying those files you can exclude them in the grunt file.
/*
* This is not necessary, but if you have a lot of components and don't want
* them constantly being deleted and copied at every file change you can update
* your Gruntfile.js with the below.
*/
clean: {
dev: ['.tmp/public/**',
'!.tmp/public',
'!.tmp/public/bower_components/**'],
build: ['www']
},
One tip on using requirejs with sails. By default you will get an error from the socket.io file since sails will load it without using requirejs. This will throw an error since socket.io supports amd style loading, more details here http://requirejs.org/docs/errors.html#mismatch.
The simplest way to fix this is to just comment out the lines near the end of the socket.io.js.
/*
* Comment the below out in the file assets/js/socket.io.js, if using requirejs
* and you don't want to modify the default sails setup or socket.io.
*/
if (typeof define === "function" && define.amd) {
define([], function () { return io; });
}
The other way would be to recode the sails files in assets/js named "socket.io.js", "sails.io.js" and app.js to be amd modules.
The simplest way I've found of achieving this is simply to add the individual Bower components to your tasks/pipeline.js file. For example, here's how you might add Modernizr:
// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [
// Load sails.io before everything else
'js/dependencies/sails.io.js',
// Dependencies like jQuery, or Angular are brought in here
'js/dependencies/**/*.js',
// =========================================================
// Modernizr:
'bower_components/modernizr/modernizr.js',
// =========================================================
// All of the rest of your client-side js files
// will be injected here in no particular order.
'js/**/*.js'
];
A link to bower_components/modernizr/modernizr.js then gets inserted in the <!--SCRIPTS--> placeholder in your layout template, and it also gets minified, etc, when you run sails lift --prod.
Sorry for my late.
I think include bower_components in linker it's a bad idea, because when you will lift sails, everything in it will be copied in .tmp and include in tags.
For example, if you have include Angular with bower, you will have two inclusions in your script: one for angular.js and one for angular.min.js. And having both is a mistake.
Here is my solution on my projects :
I have created a folder bower_component in my root directory.
I have added this line in my Gruntfile.js in the array files in copy:dev
{ '.tmp/public/linker/js/angular.js': './bower_components/angular/angular.js' }
And for each files I want to include, I need to manually add a new line in this array. I haven't find an another automatic solution. If someone finds a better solution... ;)
There is more than one approach to hooking up SailsJS and Bower.
A package for SailsJS that integrates Bower via a custom generator exists here:
https://www.npmjs.com/package/sails-generate-bower
There is one for Gulp as well.