前端工具的安装 - 韩子卢_H5之家 - 中国HTML5教程资源分享第一站

前端工具安装简述前言

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

　　对于前端的这些工具也没有接触过，平时一般都是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('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 /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css" minifyJS: true, //压缩页面JS minifyCSS: }; 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: remove: })) .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']);