I want to know what is exact use of npm, grunt etc. in front-end development?
Why and how to use it?
NPM is a Node Package Manager - you can think of it as a way to automate a lot of installations for you by a single command using the CL (command line). Otherwise you would have to install all the scripts manually, which is generally rather messy, since they are often not as user-friendly as say... game or standard program installations.
Grunt/Gulp/Broccoli/etc. - While I am not using it myself, from what I heard and read: It is a tool, that can help you automate numerous tasks, you would have to normally do manually. Anything ranging from compiling any CSS/HTML/JS preprocessor, concatenating different files together into one big file, watching for changes in files to automatically upload them to a server and so on. Basically it is a highly configurable tool meant to help you automate mundane and boring tasks.
Actually, NPM is a package manager what allows you to download a lot of packages of software such as Gulp and Grunt, but also Bootstrap etc with the command line. You have to install node.js for this. You don't need this as a front-end developer but it will make installing the software much easier than install it manually which take mostly more time.
https://docs.npmjs.com/getting-started/what-is-npm for npm
https://www.npmjs.com/browse/star for popular modules
Software such as Grunt and Gulp will help front-end developers mostly with compiling SASS and LESS, CSS preprocessors which saves you time and allows you to have more functions in your css. Grunt, Gulp etc runs in the command line and makes it easier to edit your files. For example, I use myself Gulp in combination with SASS. Because SASS has to compile to css I have set up a command which automatically compiles my SASS files to a CSS file if I hit the save button in my code editor, the SASS:Watch plugin.
I highly recommend using SASS, and so using Gulp or Grunt.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html SASS documentation
http://gulpjs.com/ Gulp documentation
http://gulpjs.com/plugins/ plug ins for gulp
Related
I am new to SCSS. I love using SASS for my local development, but when I publish a client’s website and need to make a change, it’s a pain to have to dig out the old project and set everything up so I can edit locally and then publish those changes on the production site.
Currently, I make changes in the SCSS file and then I go to online SCSS to CSS converter tool and convert SCSS to CSS and then put that CSS into CSS file.
Is there any way that if I make a change in the SCSS file in the server then it should directly update the CSS file?
Currently, I use HTML, CSS, SCSS, and Javascript
Thanks,
Use sass package instead of VSCode Extensions like Live SASS Compiler.
Why should not we use "Live SASS Compiler" VSCode extension?
Live SASS Compiler extension is old and hasn't been updated for a while.
Some features like #debug, #warn, #error won't work, so if you are using it, you have to use the sass npm package for that.
So, How to install the sass package?
So simple, just run these commands.
npm install -g sass
And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css
More information is available on the sass docs here
Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki
Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.
Install sass package:
npm install sass --save-dev
Learn more about the package and its CLI
In the package.json file's scripts section, add these:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/css"
},
Run scripts:
npm run sass-dev
// or
npm run sass-prod
What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.
The above is a very basic setup to compiling SCSS files and "watching" them for changes. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.
We currently use cljsbuild to compile our clojurescript source into the assets used in production, but during development, we use lein-figwheel. Both cljsbuild and figwheel are constantly watching for changes of the source and recompile when necessary.
I was wondering, whether it's possible to use just one tool for both, preferably in the same process.
We're fine with switching tools, especially Figwheel Main. Each file change should just compile:
a js with advanced optimizations to be used in production
live reload the code in the browser as figwheel & figwheel main do it
I found this in the figwheel documentation, but it requires manual work like cleaning targets and running the build on demand with special options.
I recently switched from lein-figwheel to figwheel-main (using Clojure Deps in place of lein). Figwheel-Main is much simpler, easier & better (basically it is "Figwheel 2.0").
Figwheel-Main can be used for both the auto-reloading during development and for compiling a single my-app.js output file for deployment or testing. You can use either :whitespace or :advanced compiler optimization level to get a single static *.js output file. I use :whitespace to generate an output file for standalone testing purposes (in Docker with chrome --headless) or :advanced for the final production build.
As a side benefit, Clojure Deps is better than lein for managing conflicting dependency versions.
I have started to learn Gulp.
It is nice, and now I have a dist folder, which is probably useless if I do not have a straight-forward method to put it on server.
Is there a way that Gulp will handle it for me, taking in concern to upload ONLY those files that modified or newly created? (In order to save upload time, sure).
I am working with Node.js.
Thanks.
how do you normally deploy to production? If you use ftp - there is a gulp function for that. If you use AWS S3 - there is a function for that. If you use something like docker or AWS EB, then you will continue to deploy through git etc - there is also likely to be a gulp function for this. Gulp is just a tool to process files and make build/deployment tasks easier.
Pulled straight from gulp website:
gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
For my current project I use Grunt as a full-deploy system. Checking/compiling all assets, cleaning cache, and deploying database. Now I am looking at Gulp.js. Everyone says, it has much more readable configuration file and it executes a bit faster. The only thing is missing for me - database deployment. With Grunt, I am using grunt-deployments package. Is there something like that for Gulp? Or should I write my own package?
Gulp is a build system. Build and Deploy are separate sets of activities. Steaming is good for building lots of smallish files like in an assembly line in manufacturing. For deployment, synchronous code (nodejs is not good at synchronous, atleast until v0.12) is good.
I use powershell(windows) or shell/chef/ansible(linux) for deployment/setup/etc, which call gulp for building assets pipeline.
Gulp is mostly targeted towards assets pipeline in other tech-stacks, and full build system for node-js techstack.
However, If you have only trivial deploy tasks, then consider using async.series() from async package and use regular node-js code to do the deployments. Accept and call the done callback when you are done in the gulp task.
I am currently creating a portable consolidation of my workflow using Node-Webkit which has node.js embedded. Now my problem is getting grunt/gulp inside the project itself as it depends on the cli somewhat(avoidable, granted), and also is confusing to me on the architecture. Is it possible to find just a .js with grunt in it to include much like Jquery/Handlebars?
Is this all I need to just include and run?
No before that make sure you environment is up, get the package.json, GruntFile.js file. In GruntFile.js you can specify what you want to pre-process. For example jade,Less,coffee. It looks very much like a node function, for sample you can refer to link
Now to make this work you also need to install various contrib plugins as per your requirement. Then register every single task in GruntFile.js. It really speeds up the development.
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('test', ['jade', 'less','coffee']);
So to process less,jade,coffee, we need to run the module installations such as
npm install grunt --save-dev
npm install grunt <module name> --save-dev
There are many more interesting configurations to learn and documentation is really nice, please refer to getting started guide
This adds the required Grunt and grunt plugins to package.json