I want to precompile my ember templates. I installed an application for that, but I can only precompile one file.
I need like to select all files with .hbs extension including subfolders
I tried ember-precompile "components/**/*.hbs" -f precompiledTemplates.js
I get error saying
Error: ENOENT, no such file or directory 'components\**\*.hbs'
How do I say the program to look for .hbs files in all subfolders ?
I figured it's probably not a windows problem, but a limitation of the library I wanted to use(ember-precompile).
Instead I chose to use gulp which works well https://www.npmjs.org/package/gulp-ember-handlebars
Here's my coffeescript gulpfile for precompiling ember templates. After initiating gulp, it compiles my templates, and if one of templates changes, gulp recompiles.
gulp = require("gulp")
concat = require("gulp-concat")
handlebars = require("gulp-ember-handlebars")
gulp.task( "default", ["precompile-ember-templates"], ()->
# default tasks complete
)
gulp.task( "precompile-ember-templates", ()->
console.log("recompiling templates")
gulp.src( ["client/components/**/*.hbs"] )
.pipe( handlebars({outputType: 'browser'}) )
.pipe( concat("templates-compiled.js") )
.pipe( gulp.dest("client/public/") )
)
gulp.watch( "client/components/**/*.hbs", ["precompile-ember-templates"] )
There does seem to be a limitation within the Ember-Precompile code when handling the windows file structure and wildcards.
When running ember-precompile on windows you must do so through a cygwin terminal or similar (in my case I use git bash).
As an example in git bash when I type the line below in my project folder it works for me:
ember-precompile templates/*.handlebars -f templates/templates.js
Related
I am attempting to get the volar vue language server to work in place of vetur for neovim's native lsp.
Using both lspconfig and lspinstall I was able to create a working custom install for sumneko_lua (unrelated but had to manually build due to some issues with the built-in :LspInstall lua). Below is that code duplicated and modified for an attempt at using this new vue server:
local vue_config = require'lspinstall/util'.extract_config('vuels')
vue_config.default_config.cmd = {'node', './node_modules/vscode-vue-languageservice/out/index.js', '--stdio'}
require'lspinstall/servers'.newvue = vim.tbl_extend('error', vue_config, {
install_script = [[
! test -f package.json && npm init -y --scope=lspinstall || true
npm install vscode-vue-languageservice#latest
]],
uninstall_script = nil
})
Running :LspInstall newvue installs properly, however :LspInfo shows this language server is attached to the buffer (of a .vue file) but not active. I believe the issue is with this path: ./node_modules/vscode-vue-languageservice/out/index.js. It exists, but may not be the correct entry point? The default vue ls simply has vls as the command because it provides a binary. Am I missing something in this package? I have yet to come across another language server without a single binary to pick out.
Thanks!
Can you try an absolute path to the out.js file? In my pretty elaborate config for a custom Volar install I'm using something just /home/myuser/dev/volar/packages/server/out/index.js (where the volar folder is just the whole volar cloned github repo). My full config is here
I don't think you can use relative paths like you did. I know you're assuming that the "./node_modules" means "workspace directory" but it's hard to tell in which directory nvim-lspconfig opens up those executables.
I have yet to come across another language server without a single binary to pick out.
Volar also provides a binary, it's volar-server (after running npm i -g #volar/server), it's just with a custom install (ie. alongside the real volar) you can't use it, because I assume you want to use your local install with custom code.
As for more indepth debugging/logging, you can check ~/.cache/nvim/lsp.log to see why the language server dies in detail.
Hello I'm using VueJS 2 and I have multiple .env in my project.
My app have .env for each company to select the company configuration (skin color / files...)
Actually I have all my .env in the root folder:
.env.company1-dev
.env.company1-staging
.env.company1-prod
.env.company2-dev
.env.company2-staging
.env.company2-prod
.env.company3-dev
.env.company3-staging
.env.company3-prod
So when I'll get 20 companies it will be confused on my root folder so it is possible to create a folder where I can place all my .env ?
The idea :
/environments/company1/
.env.dev
.env.staging
.env.prod
/environments/company2/
.env.dev
.env.staging
.env.prod
/environments/company3/
.env.dev
.env.staging
.env.prod
On your vue.config.js file you can add:
const dotenv = require("dotenv");
const path = require("path");
let envfile = ".env";
if (process.env.NODE_ENV) {
envfile += "." + process.env.NODE_ENV;
}
const result = dotenv.config({
path: path.resolve(`environments/${process.env.VUE_APP_COMPANY}`, envfile)
});
// optional: check for errors
if (result.error) {
throw result.error;
}
the before run you can set VUE_APP_COMPANY to a company name and run your app,
Note: It's important to put this code on vue.config.js and not in main.js because dotenv will use fs to read files.
References
https://github.com/motdotla/dotenv#path
https://github.com/vuejs/vue-cli/issues/787
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
The accepted answer we have also used in the past. But I found a better solution to handle different environments. Using the npm package dotenv-flow allows not only the use of different environments but has some more benefits like:
local overwriting of variables by using .env.local or .env.staging.local and so on
definition of defaults using .env.defaults
In combination we have set up our projects with this configuration:
.env
.env.defaults
.env.development
.env.production
.env.staging
.env.test
And the only thing you have to do in your vue.config.js, nuxt.config.js or other entry points is
require('dotenv-flow').config()
Reference: https://www.npmjs.com/package/dotenv-flow
The powershell solution
I was handling exactly the same problem. Accepted solution is kind of ok, but it did not solve all differences between companies. Also, if you are using npm, your scripts can look nasty. So if you have powershell, here is what I suggest - get rid of the .env files :)
You can keep your structure like you want in the question. Just convert the env files to ps1.
/build/company1/
build-dev.ps1
build-stage.ps1
build-prod.ps1
/build/company2/
build-dev.ps1
build-stage.ps1
build-prod.ps1
Inside each of those, you can fully customize all env variables, run build process and apply some advanced post-build logic (like careful auto-deploy, publishing, merging with api project, ..).
So for example company1\build-stage.ps1 can look like this:
# You can pass some arguments to the script
param (
[string]$appName = "company1"
)
# Set environment variables for vue pipeline
$env:VUE_APP_ENVIRONMENT = "company1-stage";
$env:NODE_ENV="development";
$env:VUE_APP_NAME=$appName;
$env:VUE_APP_API_BASE_URL="https://company1.stage.mycompany.com"
# Run the vue pipeline build
vue-cli-service build;
# Any additional logic e.g.
# Copy-Item -Path "./dist" -Destination "my-server/my-app" -Recurse¨
Last part is easy - just call it (manualy or from integration service like TeamCity). Or, you can put it inside package.json.
...
"scripts": {
"build-company1-stage": "#powershell -Command ./build/company1/build-stage.ps1 -appName Company-One",
}
...
The you can call whole build process just by calling
npm run build-company1-stage
Similary, you can create localhost, dev, prod, test and any other environment. Let the javascript handle the part of building the app itself. For other advanced work, use poweshell. I think that this solution gives you much more flexibility for configuration and build process.
P.S.
I know that this way I'm merging configuration and build process, but you can always extract the configuration outside the file if it gets bigger.
With vue.js when setting up a project using vue CLI i can run
$ npm run serve
to compile the files and start a port at localhost:8080
My question is what can i do so that the generated that got rendered in the page be also saved to a directory in my development machine.
Just like auto-saving and modifying so that i can be able to use the file on another project which depends on the generated files all during development
Are you sure it's not already creating a bundle somewhere? In some kind of build or dist folder?
Inside the webpack config you can check what value is used for output.
I don't know if an easier solution exists. But what i would suggest is :
Set writeToDisk option true. This will make sure your bundle written in to disk. Link
Then add an after-emit hook to the webpack pipeline:
const exec = require('child_process').exec; // use exec to run shell command
module.exports = {
...
plugins: [
...
{
apply: (compiler) => {
compiler.hooks.afterEmit.tap('CopyOutputPlugin', (compilation) => {
exec('command to copy output folder to desired folder');
});
}
}
]
};
child_process documentation.
I'm trying to learn elm programing language from here. And it bugs me to manually do page refresh with every little change.
I see that elm-reactor doesn't support live realoading anymore. But what can i do unthil the next release?
I usually use elm-live.
It is very simple and easy to use if you are just compiling Elm to js.
Solved! - gulp magic saves the day!
(this solution works only with Chrome) Here is what I did - based on this: ( Thanks janiczek !! :))
Inside your root directory add a new file named gulpfile.js
Paste this content inside:
gulpfile.js:
evar gulp = require('gulp');
var elm = require('gulp-elm');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = ['*.elm']; // here you adjust the path according with your needs.
// For ex: 'scr/**/*.elm' - maps to every folder and file nested inside the src folder.
gulp.task('elm-init', elm.init);
gulp.task('elm', ['elm-init'], function(){
return gulp.src(path)
.pipe(plumber())
.pipe(elm())
.pipe(concat('elmapp.compiled.js'))
.pipe(gulp.dest('js'))
.pipe(livereload());
});
gulp.task('default',['watch']);
gulp.task('watch', function(){
livereload.listen();
gulp.watch(path,['elm']);
});
You must have gulp installed globally if not run:
npm install gulp -g
Install the gulp dependencies:
npm install gulp-elm gulp-concat gulp-plumber gulp-livereload
Install this extension: (chrome only)
run elm-reactor and open your page in Chrome.
From inside your terminal, at root directory (or wherever your gulpfile.js is) run: gulp
With the elm page tab open, Press LiveReload button on the Chorme Extension. like below and make sure it says:
You are good to go! :)
Elm compiler doesn't like .js files around, so you will still see 2 errors. Ignore them. For me , everything else works as expected.
Using IntelliJ/WebStorm if I run tsc from a FileWatcher, my compile errors are linked to the files in the editor, such that if I double-click on a compiler error, it opens that file and takes me to the offending line of code.
However if I run Grunt, either via the integrated Grunt console, or via a FileWatcher, the compile errors do not have links and I have to manually open the file and goto the offending line number.
Is there any way to get the compile errors comming from Grunt integrated as links, like the TypeScript FileWatcher's invocation of tsc does?
When running Grunt as a file watcher, you can set up filters to make links clickable. You can use existing filters as example: open your file watcher settings, press Output Filters..., open the filter settings and copy the regular expression specified there. See http://www.jetbrains.com/webstorm/webhelp/add-filter-dialog.html
In Webstorm 8, it is not possible to apply regular expression filters on Grunt console output.
The way to go, as mentioned by lena, is to call Grunt directly via an External tool entry, and set up appropriate regex filters, such as:
For grunt-ts:
$FILE_PATH$\($LINE$,$COLUMN$\):.*
For grunt-tslint:
...$FILE_PATH$\[$LINE$,\s$COLUMN$\]:.*
Also see my comment above regarding a caveat for grunt-tslint in some environments.
I believe the '>>' added by grunt-typescript is throwing it off. Try grunt-ts (disclaimer : one of the authors) which is tested with webstorm https://github.com/grunt-ts/grunt-ts
I noticed in Webstorm 9, the built-in Grunt console was filtering/linking on typescript compile errors with grunt-typescript. I am not sure if this is a recent change or not, but it was linking this for example,
So, I went into grunt-tslint/node_modules/tslint/build/formatters, and copied proseFormatter.js to ./myproseFormatter.js. Then I tweaked it so the tslint output format would match the compile error format, by replacing square brackets with parens, and removing the whitespace between line and column number. Finally, I referenced my custom formatter in my gruntfile tslint config by adding the formatter and formattersDirectory properties:
tslint: {
options: {
configuration: grunt.file.readJSON('tslint.json'),
formatter: 'myprose',
formattersDirectory: './'
},
all: {
src: [ 'app/**/*.ts' ]
}
}
and it worked!