前端工具安装简述

前言

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

　　对于前端的这些工具也没有接触过，平时一般都是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：　　

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, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    gulp.src(‘examples/*.html‘)
        .pipe(htmlmin(options))
        .pipe(rev())
        .pipe(gulp.dest(‘dist/html‘));
});
//压缩图片
gulp.task(‘minify-img‘, function() {
    gulp.src(‘src/img/*.{png,jpg,gif,ico}‘)
        .pipe(imagemin())
        .pipe(gulp.dest(‘dist/img/‘));
});
//编译less
gulp.task(‘handleLess‘, function() {
    gulp.src(‘src/less/*.less‘)
        .pipe(less())
        .pipe(gulp.dest(‘src/css‘));
});
//设置浏览器版本自动处理浏览器前缀,并压缩css
gulp.task(‘minify-css‘, function() {
    gulp.src(‘src/css/*.css‘)
        .pipe(autoprefixer({
            browsers: [‘last 2 versions‘, ‘Android >= 4.0‘],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove: true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(minifyCss())
        .pipe(gulp.dest(‘dist/css/‘));
});
//打包并压缩js
gulp.task(‘minify-script‘, function() {
    gulp.src(‘src/js/*.js‘)
        .pipe(concat(‘helloworld.js‘)) //打包
        .pipe(uglify()) //压缩
        .pipe(gulp.dest(‘dist/js/‘));
});
gulp.task(‘default‘, [‘minifyHtml‘, ‘minify-img‘, ‘handleLess‘, ‘minify-css‘, ‘minify-script‘]);

　　运行gulp完成前端构建

　　　根据上面的配置我们可以在命令行输入 ：

gulp minify-script

　　　这就只打包压缩JS文件，也可以输入：

gulp minify-script

　　　这样就完成我们所有的构建工作。

　　进一步的学习可以转到：http://www.gulpjs.com.cn/

3、webpack的安装

　　未完待续