So I've been reading about Gulp and Grunt, and how they can minify code, compress files, combine files into one, livereload etc. However, Meteor does all that already, with Isobuild.
The reason I'm asking is someone suggested using Gulp with Meteor, and I don't see a need for it. What are some possible reasons why I should run Gulp alongside Meteor? Or it is simply redundant?
If it is not redundant, what features does Gulp has that is not in Isobuild? And will the Meteor team plan to incorporate Gulp into its next versions?
Need is probably not the right word. Whether you want it or not is a different story.
As the comments mentioned above, Meteor include a very clever build system of its own called isobuild, which builds your WHOLE application for you. But there are certainly instances where you may want your own tasks which would best be accomplished through grunt or gulp. (The range of tasks you can accomplish with these is staggering, so I'm only going to list a couple simple common examples.)
The most obvious is going to be for assets you want to put in your public folder. But this is far from an exhaustive list of tasks that you may want to automate on a larger project.
Compile SASS files not using the libsass compiler (because it doesn't support all the features)
Compress and optimize images, svg files, favicons, etc.
Create multiple sizes / versions of images
Create Sprite Sheets
Concatenate and minify scripts in your own order / manner
Combine with Bower to manage front end packages that aren't available through atmosphere etc.
The way I would approach it is by putting all of this into the private folder, so its avoided by the meteor isobuild build system.
I believe these are enough reasons to not consider Gulp or Grunt redundant, and the range of tasks possible with grunt or gulp are so varied they can't all be listed here. Needless to say IsoBuild is fantastic for what it does, but would not replace everything possible with these task runners, and to my knowledge there are no plans to incorporate Gulp into IsoBuild. IsoBuild is core to what Meteor is, gulp and grunt are very powerful automation tools with thousands of possible uses.
Heres a really great starter for gulp, its super simple to get started with: NodeJitsu Gulp tutorial
So, sure, you don't need grunt or gulp, but they could certainly have a productive place in your meteor project and they're definitely worthwhile tools to get to grips with to streamline your dev processes.
If you would like to use either grunt or gulp, this is how I approach structure my project:
Project-folder
|__ webapp // my meteor app lives here
|__ assets // scss / images / svgs
|__ node_modules
| gruntfile.js
| .eslintrc
| package.json
I then build, minify, and process my assets, with my target directories in webapp/public
Note that with full npm support coming in Meteor#1.3 this may change, though I'm unclear about whether we'll be able to mvoe this into the project yet.
Related
I'm just starting to learn Angular, I installed in my Ubuntu Linux:
Angular CLI: 7.1.4. and
Node: 10.14.2.
My question is, why one project is too large? I mean a simple "helloworld" is 334MB, I don't know why, Is it possible resize it? or delete any folder that is unnecessary? Or Is there something wrong with my installation? (how can I detect that?)
The bigger folder is node_modules, and when I create my projects, generates a lot of folders.
I was reading about "angular lazy loading", but I'm new.. It is not totally clear for me.
this is the folder spaces:
Please... I hope somebody can help me...
best regards
You might be using big bundles which are not needed, so you can break them up:
https://medium.com/#julienetienne/javascript-bundles-are-too-big-break-up-the-libraries-3be87d5ef487
In modern JavaScript, projects require modules that themselves require modules that require modules... resulting in node_modules directory with hundreds of dependencies. A 100Kb library might be included because someone needed one function from it. JavaScript is not compiled, so all that source tends to be rather big. This is an unfortunate, but unavoidable truth; your Angular project directories will be big, and there's nothing you can do about it. It is perfectly normal.
The good part: modern JavaScript deployment typically includes packing up those libraries with Webpack or Parcel or similar code bundlers. Most of them implement "tree shaking", which analyses the code to find only the functions that are potentially utilised starting from the entry point, and only bundle those, ignoring the rest. This means that 100Kb library whose one function is used is transformed into just that one function in the final distribution bundle.
Not all of the bundlers are equally good at it at this point. For example, Webpack cannot tree-shake the CommonJS modules, only ES6 ones.
You can remove node_modules folder when you are not going to use the app.
And, when you need work on the application, you can re-generate node_modules using the command: npm install
Those are just node-modules, they are needed for building the project, but not necessarily everything inside of them will be deployed to production. As Amadan said, there is a process of tree-shaking (filtering only used modules) and also in production you use the minified version of the same JS code (where for example whitespace is missing and variable-names are shortened), among other optimizations. A production-optimized Angular project should not be more than a 100KB for a hello-world application.
In the provided image I see packages like
selenium-webdriver
protractor
Those belong to dev-dependencies (see your package.json file) because they are used for testing. When building for production, no code from dev-dependencies should be included. The typescript package (which is nr.2 in size in your screenshot) will also not be present in production because types like string are only used for writing Typescript code, but the browser receives Javascript, which it is compiled to.
I'm working on a web application that currently uses vuejs for part of its interface. The back-end is NOT in Node, so there is currently no package.json file or any tool from the typical npm stack in this repository.
We already have a bunch of non-npm dependencies that need to be installed in order to use the repository, so my coworkers aren't too open about the idea of adding another layer of complexity. I can't blame them for that, it's the reason why I use npm scripts and not even gulp in my other projects. I'm tired of spending hours learning and configuring build tools that never end up doing what I want anyway.
But since the vue-cli tool no longer includes the build command, I'm a bit stuck. Is there really no more CLI app to build vue files at all? And if so, what would be the smart way to use vue without webpack? Template strings are not maintainable at all, and <script type="text/x-template"> don't work when you want to use multiple components from multiple files in the same page.
I realize your question says 'without webpack' but you may be interested in backpack - a CLI app i came across for building Vue.js without requiring you to write any configuration code. It is basically webpack preconfigured as a minimalistic build system for Node.js. It provides two commands, dev for live reload enabled development and build for building you project.
Are there any recommended workflows for managing front-end dependencies? I've been reading a lot of articles that recommend moving away from Bower, and on to an npm-only solution like Webpack, but Webpack is a whole new paradigm (loading js, scss, fonts, etc through a single js file) that by default, requires js to be running in the browser for css to load. Part of the reason I want a static site is so that js isn't mandatory for an end-user. However, I'm really tired of bower-installing things, and then having to either host everything in bower_components, targeting specific filenames (js, css, img) to include in output, or move their css/img dependencies into my own repo. Not to mention that relying on two registries is less than ideal.
Does Hexo have a recommended way, or does anyone have an opinion on how to do this? Running a Hexo server in a separate terminal from a webpack-dev-server seems painful and awkward, and possibly create some confusion as to which library should be handling which files.
Are other tools more suited for dependency management in a static site generator's dev/build process?
I have a repo which consists of several "micro-services" which I upload to AWS's Lambda. In addition I have a few shared libraries that I'd like to package up when sending to AWS.
Therefore my directory structure looks like:
/micro-service-1
/dist
package.json
index.js
/micro-service-2
/dist
package.json
index.js
/shared-component-1
/dist
package.json
component-name-1.js
/shared-component-2
/dist
package.json
component-name-2.js
The basic deployment leverages the handy node-lambda npm module but when I reference a local shared component with a statement like:
var sharedService = require('../../shared-component-1/dist/index');
This works just fine with the node-lambda run command but node-lambda deploy drops this local dependency. Probably makes sense because I'm going below the "root" directory in my dependency so I thought maybe I'd leverage gulp to make this work but I'm pretty darn new to it so I may be doing something dumb. My strategy was to:
Have gulp deploy depend on a local-deps task
the local-deps task would:
npm build --production to a directory
then pipe this directory over to the micro-service under the /local directory
clean up the install in the shared
I would then refer to all shared components like so:
var sharedService = require('local/component-name-1');
Hopefully this makes what I'm trying to achieve. Does this strategy make sense? Is there a simpler way I should be considering? Does anyone have any examples of anything like this in "gulp speak"?
I have an answer to this! :D
TL;DR - Use npm link to link create a symbolic link between your common component and the dependent component.
So, I have a a project with only two modules:
- main-module
- referenced-module
Each of these is a node module. If I cd into referenced-module and run npm link, then cd into main-module and npm link referenced-module, npm will 'install' my referenced-module into my main-module and store it in my node_modules folder. NOTE: When running the second npm link, the name of the project is the one you find in your package.json, not the name of the directory (see npm link documentation, previously linked).
Now, in my main-module all I need to do is var test = require('referenced-module') and I can use that to my hearts content. Be sure to module.exports your code from your referenced-module!
Now, when you zip up main-module to deploy it to AWS Lambda, the links are resolved and the real modules are put in their place! I've tested this and it works, though not with node-lambda yet, though I don't see why this should be a problem (unless it does something different with the package restores).
What's nice about this approach as well is that any changes I make to my referenced-module are automatically picked up by my main-module during development, so I don't have to run any gulp tasks or anything to sync them.
I find this is quite a nice, clean solution and I was able to get it working within a few minutes. If anything I've described above doesn't make any sense (as I've only just discovered this solution myself!), please leave a comment and I'll try and clarify for you.
UPDATE FEB 2016
Depending on your requirements and how large your application is, there may be an interesting alternative that solves this problem even more elegantly than using symlinking. Take a look at Serverless. It's quite a neat way of structuring serverless applications and includes useful features like being able to assign API Gateway endpoints that trigger the Lambda function you are writing. It even allows you to script CloudFormation configurations, so if you have other resources to deploy then you could do so here. Need a 'beta' or 'prod' stage? This can do it for you too. I've been using it for just over a week and while there is a bit of setup to do and things aren't always as clear as you'd like, it is quite flexible and the support community is good!
While using serverless we faced a similar issue, when having the need to share code between AWS Lambdas. Initially we used to duplication the code, across each microservice, but later as always it became difficult to manage.
Since the development done in Windows Environment, using symbolic links was not an option for us.
Then we came up with a solution to use a shared folder to keep the local dependencies and use a custom written gulp task to copy these dependencies across each of the microservice endpoints so that the dependency can be required similar to npm package.
One of the decisions we made is not to keep two places to define the dependencies for microservices, so we used the same package.json to define the local shared dependencies, where gulp task passes this file and copy the shared dependencies accordingly also installing the npm dependencies with a single command.
Later we made the code open source as npm modules serverless-dependency-install and gulp-dependency-install.
I am new to NodeJS and Grunt world. I am working on a project where we have multiple modules dependent on each other. So my question how can I automate my process of build for each of projects(modules)
like currently when I take update, I have to manually go in each of projects and have to run
npm install
and then
grunt
I think we'd need a little more information on what your project is and how its setup. Overall though, if you have several projects, each that uses grunt to build it, you'll need to run grunt for each one.
The way I handle this is to use TMUX, and more specifically TMUXINATOR https://github.com/tmuxinator/tmuxinator to setup workspaces for each of my projects. For example, I might type:
mux service-framework
Doing so could launch (for example), four terminals, my editor, start several grunt projects, and load a browser. Its a great tool for the situation you described.
There are a lot of tools for doing this type of thing, TMUX and TMUXINATOR are only one. Hopefully this helps a bit!