Front-End Tool installation and tool Installation

Front-End Tool installation and tool Installation
Introduction to front-end tool Installation

Although there has been a write front-end, and the level of self-recognition increases rapidly, there is still no modular development.

These front-end tools have never been used. Usually vs and vs code are used in normal times. In order to implement modular development, you are ready to come and play with these front-end tools.

Therefore, write the installation steps of these front-end tools and record the installation steps. If you can help others, it will be better.

1. Install NPM and Node. js

After node. js is installed, npm is automatically installed, so the two are written together.

Nodejs:

Https://nodejs.org/en/download/

Just give this kind of things and install it based on your own computer type. If you are a programmer, you will not be able to talk about the next step.

Npm download source configuration

Here npm is understood as a download tool, and the download address is https://www.npmjs.com.

But access in the country is unstable, it is recommended to use domestic mirror site https://npm.taobao.org.

In cmd.exe, run the following command:

npm --registry https://registry.npm.taobao.org info underscore

Alternatively, find the npmrc file in the Nodejs installation folder and add it to the file.

registry = https://registry.npm.taobao.org

2. Install gulp globally:

npm install gulp -g

InputYou can view the corresponding version of gulp-v.

Used in the project:

The following is a project I created with vs code:

　　

Run the command line cd to the project folder you created, and then npm init can generate your own package. json. This is a description file for each project of your project. It defines the various modules required by the project and the configuration information of the project (such as the name, version, license, and other metadata ).

Install gulp in the project

npm install gulp --save-dev

After installation:

　　

In this case, the node_modules folder is added to the project, and the devDependencies field is automatically written to package. json, And the gulp Module name is filled in this field.

　　

Next, install a bunch of plug-ins available in gulp.


npm install --save-dev gulp-uglify gulp-concat gulp-imagemin gulp-htmlmin gulp-clean-css gulp-rev-append gulp-autoprefixer

After installation:

　　

 

Gulp-uglify is a compressed js file, gulp-concat is the merged package file, gulp-imagemin is the compressed image, gulp-htmlmin is the compressed html, and gulp-clean-css is the compressed css file, gulp-rev-append is the added version number.

In fact, the bundle of. net mvc inherits the above functions, so it seems that development with. net is completely useless. However, it may still be necessary to come to other languages.

Gulp-autoprefixer automatically processes the browser prefix Based on the browser version. The gulp-less plug-in compiles the less file into css, and automatically compiles less when there is a change in the less file, and ensure that the less syntax error or exceptions can work normally and prompt error messages.

There must be some plug-ins with other functions. This is just a few of the plug-ins I have learned for the time being,If there are other useful ones, I hope you can leave a message to tell me.

Compile the gulpfile. js File

If you want to use these plug-ins, add a gulpfile. js configuration file under the root directory. The following is my own test project:

　　

Configuration Files written according to the test project:

/* Introduce gulp and related plug-ins require ('module in node _ les es') */var gulp = require ('gulp '); var minifyCss = require ("gulp-clean-css"), uglify = require ('Gulp-uglify '), concat = require ('Gulp-concat '), imagemin = require ('Gulp-imagemin'), htmlmin = require ('Gulp-htmlmin'), rev = require ('Gulp-rev-append '), autoprefixer = require ('Gulp-autoprefixer '), less = require ('Gulp-less'); // compress html and add a version number to the page reference, clear the page reference cache gulp. task ('minifyhtml ', function () {var options = {removeComments: true, // clear the HTML comment collapseWhitespace: true, // compress HTML collapseBooleanAttributes: true, // The Boolean attribute value <input checked = "true"/>=> <input/> removeEmptyAttributes: true, // delete all spaces as attribute values <input id = ""/>=> <input/> removeScriptTypeAttributes: true, // Delete <script> type = "text/javascript" removeStyleLinkTypeAttributes: true, // Delete <style> and <link> type = "text/css" minifyJS: true, // compression page JS minifyCSS: true // compression page CSS}; gulp. src ('examples /*. html '). pipe (htmlmin (options )). pipe (rev ()). pipe (gulp. dest ('dist/html');}); // compress the image gulp. task ('minify-img ', function () {gulp. src ('src/img /*. {png, jpg, gif, ico }'). pipe (imagemin ()). pipe (gulp. dest ('dist/img/');}); // compile lessgulp. task ('handleless ', function () {gulp. src ('src/less /*. less '). pipe (less ()). pipe (gulp. dest ('src/css ');}); // sets the browser version to automatically process the browser prefix and compress cssgulp. task ('minify-css ', function () {gulp. src ('src/css /*. css '). pipe (autoprefixer ({browsers: ['last 2 version', 'android> = 4.0 '], cascade: true, // whether to beautify the property value. Default Value: true, as shown in the following figure: //-webkit-transform: rotate (45deg); // transform: rotate (45deg); remove: true // remove unnecessary prefix default: true })). pipe (minifyCss ()). pipe (gulp. dest ('dist/css/');}); // package and compress jsgulp. task ('minify-script', function () {gulp. src ('src/js /*. js '). pipe (concat ('helloworld. js ') // package. pipe (uglify () // compression. pipe (gulp. dest ('dist/js/');}); gulp. task ('default', ['minifyhtml ', 'minify-img', 'handleless ', 'minify-css', 'minify-script']);

Run gulp to build the front-end

Based on the above configuration, we can enter the following in the command line:

gulp minify-script

This will only compress the JS file, you can also enter:

gulp minify-script

This completes all our build work.

Further learning can be transferred to: http://www.gulpjs.com.cn/

3. Install webpack

To be continued