I am using gulp for the build system, bootstrap-styl as UX framework, and browserify as js bundler.
I need to store into a configuration file the different screen sizes used by media queries.
Stylus and the javascript application need to use these values.
Is there a plugin for building that ?
I have found for grunt-shared-config, is there an equivalent for gulp ?
You can use json bif for that.
Related
I have a project where I use deck.gl to create web maps. It works fine, however, I need the functionality of drawing polygons and, for that, the deck.gl documentation tells me to use nebula.gl. The sample of the functionality that I need can be found here: https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs?file=/app.js
The problem that I have is that on the nebula.gl documentation there's no library compiled to be used on a <script> tag. They only work with the library installed through npm or yarn, then the only way I managed to make it work so far was by compiling the entire project with webpack... In my specific case, I'd like to avoid compiling the entire project and I'd prefer using a compiled js file with the <script> tag.
Is it possible to compile npm libraries with webpack into a single js file? Just so I can use this nebula.gl library with a <script> tag on my webpage? Or am I misinterpreting the way I should be using webpack?
I am installing vue.js by CLI, and there i have found the command such as
vue init template-name project-name
Thus, I want to know that what are these templates and how many of these are there which will be appropriate for me?
Well, i looked up and researched and found that there are, different versions for templates in Vue, if you are using it by Cli.
Templates are such as:-
webpack
webpack-simple
pwa
simple
browserify
browserify-simple
in which webpack is used mostly. since it provides some css extraction and more features too
Generally developers who are new to any framework, mainly use webpack-simple that sets up all things for them regarding gulp, eslintrc and much more files.
I am using the Aurelia CLI for creating a SPA and it makes everything a lot easier compared to using Jspm.
However now we have some custom elements like: <my-custom-element></my-custom-element> that we want to package into an npm package so we can use it in multiple/other Aurelia CLI projects.
How would I go about creating it? I can't find any examples or documentation about this.
My guess is that I need to transpile my custom element files so that I end up with an npm package containing .js files (we use typescript) and the correct module loader synax (CommonJS?)?
My understanding is that I can't simply create an npm package that contains my my-custom.element.ts + my-custom-element.html file since it all needs to be transpiled, bundled and so on.
I am also guessing that I can't simply do an au build and use my bundles since that would bundle the entire SPA and not just my custom element files?
So what steps do I need to perform to create an npm package that contains a custom element that can be added to my Aurelia CLI project?
Any help or samples would be very welcome! Thank you!
There are a heap of ways you can do this. However, to keep things simple I am going to recommend the official Aurelia plugin skeleton for developing plugins, which you can get on Github here. If you venture into the src folder, you'll see a very basic example of a custom element and how you can make it global. The plugin skeleton uses Gulp for build tasks, which can be found in the build/tasks directory.
At present, you cannot use the Aurelia CLI to create a plugin. But in the future, you will most likely see this feature added into the CLI as it becomes more than just a CLI for creating applications.
I have developed an Angular 2 application using npm, As a fresher,I don't know some ways like below.
When I publish I used npm publish so that it publish the application in npm account in the web.
So here, is there any way to publish our app in the localhost,because I don't want to use npm account and I just need to avoid node_modules folder on publishing ?
If any other way,that can be used to publish the Angular2 Application in local other than npm, let me know.I try that.
If it is not possible to publish the application without npm web account, Kindly let me know please .
Excuse mistakes,If any.Thanks in adv :)
npm publish is to make a library package available to other for free use.
That's not what you use for making a web application available. This is called deployment.
For deployment you usually execute a build step that transpiles TS to JS, and combines them into a single file to reduce the number of requests the browser needs to make in order to get all source files of your application. It may also inline component HTML and CSS. This build step can also minify and mangle to JS code to reduce the resulting file size even more.
The resulting output can just be copied to any directory that any web server is able to serve to a browser either on your local machine or at some machine of a web hosting provider.
There are different ways to build your application depending on your setup.
See for example How to deploy Angular 2 application developed in Typescript to production?
You need browserify, that's all
browsers need references to all js files to be put in the html, they don't understand node's require() method that forms modules dependencies
what browserify does is traversing the entire dependency graph of your project, recursively bundling up all the required modules starting at the given root into a single js file
install it by node package manager
npm install -g browserify
use it to bundle all needed modules staring at main.js
browserify main.js -o bundle.js
now put a single script tag into your html
<script src="bundle.js"></script>
as far as i know, node_modules contains dependencies for typescript transpilers and few others. so it will not be possible to publish an app without using node_modules.
perhaps you can try using Plnkr or jsFiddle
where you can make imports online using cdn links for node_modules and publish your app.
it will be easy compared to other alternatives.
hope this helps.
I'm writing most new code with es6/babel/jspm. But module loading is not yet standardized so run into troubles with other team members using webpack, browserify etc.
This leads me to ask just what are the various workflows for babel module loading? Any pointers? Pros/Cons? Basically I need a way to at least provide the alternatives to our team.
I was using gulp + browserify but switched to webpack.
reasons:
performance
smaller output
less dependencies (webpack has minification and sourcemaps built in)
webpack examples (babel6)
https://github.com/glued/harp-babel/blob/master/webpack.config.js
https://github.com/glued/harp-babel/blob/master/webpack.production.config.js
gulp example (babel6)
https://github.com/glued/harp-babel/blob/babel-gulp-v6/gulpfile.babel.js