Front-end automation and front-end development environments

Development environment

node. js NPM

node. js is a JavaScript runtime built on Chrome ' s V8 JavaScript engine.

node. JS uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

node. js ' package ecosystem, NPM, was the largest ecosystem of open source libraries in the world.

Package.json is the NPM configuration file

The difference between dependencies and devdependencies

npm installWhen installing the NPM package, there are two command parameters that can be used to write their information to a package.json file:

1. –save
2. –save-dev

devDependenciesThe modules listed below are used in our development, such as grunt-contrib-uglify, which we use to confuse JS files, which are not deployed to the production environment.

dependenciesThe next module is the dependency we need in our production environment.

Run the following command at the root of the project, and the plugins will be automatically installed in the Node_modules subdirectory.

npm install

The above method is for the case of an existing package.json. If you want to automatically generate the Package.json file, you can use the NPM init command to follow the onscreen prompts to answer the desired module name and version.

npm init

If the existing Package.json file does not include the Grunt module, the module will automatically be added to the Package.json file when the Grunt module is installed directly with the –save-dev parameter .

npm install <module> --save-dev

For example, the following NPM command is required to correspond to the module specified in the Package.json file above.

npm install grunt --save-devnpm install grunt-contrib-jshint --save-devnpm install grunt-contrib-concat --save-devnpm install grunt-contrib-uglify --save-devnpm install grunt-contrib-watch --save-dev

Git

Git is a version control system, which is used for software development and other version control tasks.

Version management tools distributed

Grunt

Grunt: Task Auto-management tool

You need to install GRUNT-CLI before installing grunt, grunt-cli means that the command line interface of Grunt is installed

In one word: automation. Performing repetitive tasks (repetitive task) like minification, compilation, unit testing , Linting, (compression, compilation, unit test) etc, the easier your job becomes. After your ' ve configured it through a gruntfile, a task runner can do the most of that mundane work for you-and your Team-with Basically zero effort.

Grunt and Grunt plugins is installed and managed via NPM, the node. JS Package Manager. ( dependent on node. js)

Gruntfile.js, it is grunt configuration file

Common modules for Grunt

• Grunt-contrib-clean: Delete files.
• Grunt-contrib-compass: Compile the Sass file with Compass.
• Grunt-contrib-concat: Merge files.
• Grunt-contrib-copy: Copy the file.
• Grunt-contrib-cssmin: Compress and merge CSS files.
• Grunt-contrib-imagemin: Image compression module.
• Grunt-contrib-jshint: Check JavaScript syntax.
• Grunt-contrib-uglify: Compresses and merges JavaScript files.
• Grunt-contrib-watch: Monitor file changes and make corresponding actions.

A sample of Gruntfile.js

Gulp

Same as grunt, also an automated tool that relies on node. js

Bower

Bower doesn ' t concatenate or minify code or do anything else-it just installs the right versions of the s you need and their dependencies.

Http-server

Http-server is a simple, zero-configuration command-line HTTP server. (Simple, "0" set, command-line HTTP server) It's powerful enough for production usage, but it's simple and hackable enough-be-used for testing, local DEVELOPM Ent, and learning.

Front-end automation and front-end development environments