I am working on a huge project where i am using Java, TypeScript, Jade and Less.
To compile the project, i am using Maven (Java) + Grunt( TS, Jade, LESS). Grunt is called from maven, because maven drives whole project (include backend). With grunt everthing works perfect, but i want to have realtime compilation in idea, on ctrl+s command of frontend. I am using FileWatchers plugin for that, but there is a problem.
My html page is referencing to bundle.js file, that is compile over grunt. All TypeScript files are compiled to JS files and bundle.js file. Problem is, that i am not able to compile bundle.js realtime. I have tried to set an argument to tsc. Sth like
tsc -out bundle.js "**/*.ts"
Problem is, that tsc doesnt support regular expression. I have found some solution, but all of them requires some definition of files, that need to be done by external tool and werent automatic.
I dont want to the this options :
tsc -out bundle.js #FileWithTSFiles.txt
tsc -out bundle.js main.ts hello.ts helloWorld.ts
One more solution is propably possible, but don't know all necessary informations. I have got an idea to use FileWatchers plugin this way (like an argument write sth like)
tsc -out bundle.js $MacroToListAllFilesInProject$
because some macros are available here. Problem is, that i need to define custom macro to list the files, and i am not able to find the place to do that.
Same problem with LESS Files.
Grunt( TS, Jade, LESS).
If you are using grunt-ts simply use a target like :
dev: {
src: ['./**/*.ts'],
out: './bundle.js',
},
Reference : https://github.com/grunt-ts/grunt-ts
I'd like to point out that when using --out you should use a reference file to determine the order of the generated javascript https://github.com/grunt-ts/grunt-ts#javascript-generation-and-ordering
Related
I have a program with multiple .vue files in src/components. These use typescript and sass. The program uses webpack for compilation and bundling. I would like to add all these components to a single npm package to be used as a library with the following restrictions:
It should be compiled down to javascript and css so whoever imports my library doesn't need my compile dependencies and webpack configuration
The components depend on typescript files. These should also be compiled, but not bundled. They are valid entry points for the library.
The import for the users of the library should be as painless as possible. It would be optimal if the generated js and css could be loaded in a single import, just like importing a .vue file
Is this possible to do? And if so, how? If not, how could I best approximate this or what are my alternatives?
I have tried to use vue-cli-service build --target lib but it seems that can only handle one component, bundles the ts files, and I'm not sure if it behaves like I expect when you import a file.
I have an UglifyJS file watcher set up in IntelliJ IDEA, and it works great while I'm editing -- I modify the source js, the minified version gets created next to it automatically.
However, when I run an Ant build, and it copies the minified versions into the build working dir, the watcher "helpfully" creates doubly minified versions of them (*.min.min.js) in the build working dir, not ok.
I've set the Scope of the watcher to the 'src' module, but apparently that doesn't do what you'd think it would, because the doubles get created when Ant copies files into the 'build' module. Happens when I use IDEA to manually copy a single file from src to build too.
I don't see how to set this up to include *.js but exclude *.min.js, which is really the right thing. (Seems so sensible that Uglify should have it built in, but far as I can see it doesn't.)
Other than getting rid of the watcher and scripting the build do the minification, or copying only the original js versions and letting the watcher (re)create the minified ones, what's the best way to go here?
Got this working, thanks to a helpful commenter on the IDEA forum. The key is setting up a custom Scope, which I tried to do before but failed.
Pattern I ended up with was this, for anyone with similar needs:
file[src]:*.js&&!file:*min.js*
Making the 'src' module current then opening the dlg and selecting it from the dropdown in the main watcher config window apparently doesn't actually filter by that module. Clicking the ... btn, then choosing it from the dlg that opens does, plus I added an explicit filename pattern to exclude already minified files too.
Works great now, far as I've tested (both a minimal Ant test and manually copying a file to 'build' in IDEA).
This is an old question, and perhaps the Watchers didn't have this functionality at the time.
Using JetBrains 'macro' codes makes the 'min.min.min.js' problem go away.
$FileNameWithoutAllExtensions$.js -m --source-map -o $ContentRoot$\prod\js\$FileNameWithoutAllExtensions$.min.js
I always set 'Scope' to 'Current File', too; why run uglify on files that haven't been altered? (I'm assuming that any 3rd party JS libraries are already minified).
I am trying to compile a .scss file in sass directory to a sibling css directory. However, I am not able to. I dint find enough documentation on the file watcher plugin as well.
Currently, it is compiling into the sass directory. And I need to compile into css directory.
I am able to compile it manually using
sass --watch sass/file.scss:css/file.css
How do I do it using Intellij File Watcher plugin?
I tried using the macros but I dont think I understand macros much, because I either get directory not found or .scss file not found. I am aware that I have to change the argument input in some way, but
--watch sass/file.scss:css/file.scss
dint work.
Pl help.
I am guessing you may have figured this out by now. But this may be helpful for future searches.
You don't need to add sass --watch to the arguments because that happens implicitly via the Intellij watcher.
But lets say you have a directory structure like so...
-C
-path
-to
-css
styles.css
-sass
styles.scss
You would do something like this in Arguments:
--no-cache --update C:\path\to\css\sass:C:\path\to\css
And then set your working directory to C:\path\to\css\sass
Example:
Having a multi file typescript project, using external modules.
If I compile with
tsc -d init.ts -m "commonjs"
Then all the files of the project get their own .d.ts file.
But I would like to generate one single .d.ts file for the whole project.
What's the best way to go about this?
But I would like to generate one single .d.ts file for the whole project. What's the best way to go about this?
At the moment it is handled in a hacky way by : https://github.com/TypeStrong/grunt-dts-bundle
More : https://github.com/Microsoft/TypeScript/issues/1236
You can generate a single d.ts and a .ts and .js bundle using the npm package TsProject.
Have a look at "npm-dts" package. I think it does exactly what you need.
Also, there is a plugin for WebPack called "npm-dts-webpack-plugin".
I have an Angular app where I use browserify to manage my dependencies. I am also using momentjs to do all my time manipulation. I have several modules that I am using browserify to build, but it is pulling in momentjs more than once, even when I use the external command. Here is my code. First I have a base module that has all of my shared libs:
require('angular');
require('angular-route');
require('moment');
Here is the code I use to browserify in my gulpfile.js:
browserify().require('./js/donor/donor-libs.js')
.bundle()
.pipe(source('donor-libs.js'))
.pipe(gulp.dest('./build'));
This builds out fine and has the libs that I would expect including momentjs.
Now I go to build a module that is dependent on this module. momentjs is used in this module. Here is the code that I use to build the module:
browserify().require('./js/donor/history-module.js')
.external('./js/donor/donor-libs.js')
.bundle()
.pipe(source(filename))
.pipe(gulp.dest('./build'));
Now when I look in my build directory, I have momentjs in both the donor-libs.js and my history-module.js. Why doesn't it recognize that I have already required in momentjs in my donor-libs.js? What do I need to do to only require in 3rd party libs one time? What don't I understand about the external command?
The reason libs are being pulled in multiple times is that the external command is being used improperly. external is expecting a path or an array of paths that will externalized. external will not look through a js file and find the required files and then not pull them in other modules. The code should of looked something like this
.external('angular', 'angular-route', 'moment')
or the path to the required lib. This would of externalized these files and fixed the problem of a lib being pulled in multiple times.