前端工具安装简述

前言

　　虽然一直有写前端，而且水平自认上升很快，但是仍然没有玩过模块化开发。

　　对于前端的这些工具也没有接触过，平时一般都是vs和vs code就搞定了，为了搞一搞模块化开发，准备来玩一下这些前端工具。

　　所以写写这些前端工具的安装步骤，记录一下以后忘了也能用，如果能帮到别人就更好了。

1、NPM和Node.js的安装

　　安装node.js后，自动就安装了npm，所以这里两者写到一起了。

　　nodejs的下载地址：

　　https://nodejs.org/en/download/

　　这种东西给个下载地址就好了，根据自己电脑类型安装，做程序员的也没有电脑小白，下一步就不说了。

　　npm下载源的配置

　　npm在这里被我理解为一个下载工具，而下载的地址为https://www.npmjs.com 。

　　只不过在国内访问不稳定，因此建议使用国内镜向站点https://npm.taobao.org 。

　　在cmd.exe中，运行以下命令即可：

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

　　或者找到Nodejs安装文件夹中的npmrc文件，在该文件中加入

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

2、gulp的安装

　　gulp用来优化前端工作流程。

　　全局安装gulp：　　

npm install gulp -g

　　输入gulp -v可以查看到相应版本

　　使用到项目中：

　　以下是我用vs code自己建的一个项目：

　　命令行cd到自己建的项目文件夹，然后npm init即可生成自己的package.json，这是自己项目的每个项目的一个描述文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。

　　将gulp安装到项目中

npm install gulp --save-dev

　　安装后：

　　此时项目中多了node_modules这个文件夹，同时package.json中自动写入了devDependencies字段，并在该字段下填充了gulp模块名。

　　接下来安装上面gulp中可用的一堆插件


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

　　安装后：

　　gulp-uglify为压缩js文件，gulp-concat为合并打包文件，gulp-imagemin为压缩图片，gulp-htmlmin为压缩html，gulp-clean-css压缩css文件，gulp-rev-append为添加版本号。

　　实际上.NET MVC的bundle继承了上面这些功能，所以用.net进行开发貌似完全用不到，不过想来别的语言也许应该还是需要的。

　　而gulp-autoprefixer是根据设置浏览器版本自动处理浏览器前缀，gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

　　肯定还是有一些别的功能的插件，这只是我暂时了解到的几个，如果有其它好用的也希望有大神能留言告诉我一下。

　　编写gulpfile.js文件

　　如果要用这些插件，那么还要在根目录下加一个gulpfile.js配置文件，以下为我自己的测试项目：

　　根据测试项目写的配置文件：

/*引入gulp及相关插件 require('node_modules里对应模块')*/
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');
//压缩html,并给页面的引用添加版本号，清除页面引用缓存
gulp.task('minifyHtml', function() {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值  ==> 
        removeEmptyAttributes: true, //删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: true, //删除