如何打造一个使人愉悦的前端开发环境（一）

文章来源

最近几年，前端发展愈来愈迅速，各类萌新加入了前端这个你们庭，大有赶IOS、超Android的趋势呀！同时，萌新们提出了各类前端工做问题，除了最基础的html、css、js三板斧以外，最让人头疼的应该是关于环境的配置问题，因此以环境做为切入点，开始一系列的前端开发环境配置文章。

主要会涉及到打包、构建、编程工具、debug等等前端环境，以及先后端分离、Nodejs中间层使用伸展面。

工欲善其事必先利其器

以编程工具而言WebStorm、sublime、Atom、VS Code、Brackets等等一大推，这方面我我的是以为无所谓，萝卜青菜各有所爱，优缺点基本很明显，就看我的的接受状况了，举点例子说下吧：

• WebStorm 很全面，不管是纯前端仍是Nodejs，包括git、svn、命令行、格式化工具都有，使用顺手以后各类方便，并且还直接支持nodejs的debug，做为前端的全能重量级IDE很是不错，惟一很差的就是过重，体如今内存占有，启动时间上。

• sublime 轻量级文本编辑器，3比较2来讲有很大提高，小巧灵活是最大的特色，麻烦的是各类插件的配置，须要本身来组合，不熟悉的人用起来远远不想WebStorm方便，快捷。并且每次新的电脑都要配置一次，比较繁琐。（如今有能够导出配置文件来适用新电脑的方法）

• Atom相似sublime，比较轻量级，内核主要是Nodejs写出来的，前端各类爱，由于比较适合前端的技术栈，可是大文件的性能问题一直受人诟病，不是很流畅，还有就是插件比起sublime来讲仍是少了很多，整个生态不如sublime，可是由于是github出的，仍是受人青睐很多。我贡献的一个vue格式化插件

• VS Code 和 Brackets这两个比较小众，使用的不多，我用过VS，感受还挺不错，就是生态更差，并且不少插件的说明写的很糟糕，让人看不懂。各方面的资料也比较少。Brackets 一个同事使用过，提示比较好，我的感受入门很不错。貌似还能及时浏览web效果。

我的建议使用入门的时候使用sublime或者Atom就能够，配置一下本身喜欢的插件，基本就能够开始干活了，固然若是是用eclipse已经很习惯的人，我以为WebStorm这种重型机枪，可能更适合你。不要对工具的提示产生依赖太过于严重，不然不少东西本身会慢慢遗忘的哦！！！

PS：若是要提高本身的逼格怎么办？请使用VIM或者Emacs这种高逼格的编辑方法。

木牛流马

粮草生产的快，也要有好的运输工具才能上到前线，对于前端而言，属于咱们的运输工具是打包构建工具。

打包构建工具经历了各类不一样的时代，从服务端主宰的打包构建，到如今前端本身主宰的构建工具，不一样的需求产生了各类不一样的构建工具，这些工具其实也算前端的工做能力之一，由于每一种新的工具都有优缺点，熟悉的使用也并不是特别简单的事情。

先来讲说都有哪些不一样的种类吧：

• 后端为主要的总体打包工具，这个以FIS做为表明，你们或多或少都应该知道百度出的这个开源打包构建工具链，从总体上解决了前端工程的问题，包括优化、资源加载、模块打包、自动化、部署一系列问题，从功能上看很是全面，FIS3的升级让人也感受非常不错，再也不依赖PHP和java之类的服务端语言，基于Nodejs来作，更加贴近前端社区。那么缺点是什么呢： 生态环境不够丰富，主要插件应该仍是百度本身人提供的，参与进来的社区人数不够多。我以为这方面的缘由是fis2当时对PHP和JAVA的依赖，致使你们对fis的兴趣不弄，错过了最佳时机，这个其实跟百度本身的web的技术栈有很大关系。同时带来的好处是，FIS能够结合PHP作总体网站的部署和构建。以上主要是看文档的一些分析，本人并无用过FIS，有说错请拍砖。这类的打包构建工具还有不少，大部分都是大公司的内部使用，例如京东、马蜂窝之类，都是PHP为主，加上前端的总体构建工具。

• Grunt派系，这个应该是比较早的Nodejs打包构建工具，一度非常流行，Grunt的好处是提供了一个核心的构建规范，基于文件，来使用各类Grunt的插件组合整个构建行为，当时我记得比较清楚的是我前面文章提到过的Yeoman这个构建工具，核心就是Grunt，自动生成了各类插件配置。可是这个有很大的缺点：一是构建的配置文件写的很长很啰嗦，二是效率不是很高，缘由是它构建的方式基于文件的，每次都会产生新的临时文件，这样无形中就会有磁盘的I/O读写，因此会下降总体的构建速度。

• Gulp新体系，由于以上的Grunt的缺点，Gulp应运而生，借鉴了Unix的管道概念，用Nodejs的stream特性，来组织整个构建链条，在官方的核心只提供几个方法，你们基于官方API来编写本身须要的处理插件，再组合起来，完成构建功能。和Grunt的基本理念很像，可是不少又有区分，例如：配置和运行分离，插件单一职责，规定大于配置等等。关于这两个的比较有不少，你们能够搜搜Grunt Gulp 就知道了。很少说

• 新的王者Webpack，我的感受应该是15年上半年到16年初，Webpack横空出世，大有一举统一整个前端构建生态的趋势，貌似如今FE们不会点Webpack相关的，都很差意思说本身是前端了。最初Webpack应该只是和requirejs、browserify之类模块化工具比对，可是其灵活的API和丰富的loader，导致它能够连带完成Gulp之类的构建事件，目前其生态环境巨好，各类插件层出不穷，比较火的React，vuejs等都有相关的针对性loader来优化构建方式，能够说是目前最流行的工具。不过缺点也特别的明显，就是难懂，主要是过于灵活，各类方式都能接受，致使没有一个统一的标准，配置起来特别难受，在群里，通常对于Webpack的配置问题的是最多的。不少新手对于Webpack的各类配置错误，感受都欲哭无泪，想死的心都有了。相关的文章也不少，推荐题叶的入门指南。

• 逼格提高的NPM构建方式。这个阮一峰对于前端构建的变化吐槽过，说新的构建工具就是ES6的构建工具。推荐看贺师俊的答案如何评价阮一峰关于前端工具变化快的言论？

就我我的而言，目前主要仍是使用的Webpack来构建，固然一些比较老的系统代码，因为历史缘由，仍是使用的Gulp来构建，也有正在切换之中的，Gulp+Webpack。比较丰富多彩（其实有点混乱）。

三只松鼠--干货

var gulp = require('gulp');

var less = require('gulp-less');

var plugins = require('gulp-load-plugins')();

var pngquant = require('imagemin-pngquant');

gulp.task('default', function(){

gulp.src('less/zhanzhao.less').pipe(less()).pipe(gulp.dest('css/'));

gulp.src('less/liuqian.less').pipe(less()).pipe(gulp.dest('css/'));

gulp.src('less/student.less').pipe(less()).pipe(gulp.dest('css/'));

return gulp.src('less/company.less').pipe(less()).pipe(gulp.dest('css/'));

});

gulp.task('clean',function(){

return gulp.src('publish/').pipe(plugins.clean());

});

gulp.task('bulid', ['clean'],function(){

gulp.src('favicon.ico').pipe(gulp.dest('publish/'));

gulp.src('download/**/*').pipe(gulp.dest('publish/download/'));

gulp.src('mail/**/*').pipe(gulp.dest('publish/mail/'));

gulp.src('statement/**/*').pipe(gulp.dest('publish/statement/'));

gulp.src('template/**/*').pipe(gulp.dest('publish/template/'));

gulp.src('css/**/*.css').pipe(plugins.minifyCss()).pipe(gulp.dest('publish/css/'));

gulp.src('scripts/**/*.js').pipe(plugins.uglify()).pipe(gulp.dest('publish/scripts/'));

return gulp.src('images/**/*').pipe(plugins.cache(plugins.imagemin({

optimizationLevel: 5,

progressive: true,

svgoPlugins: [{removeViewBox: false}],

use: [pngquant()]

}))).pipe(gulp.dest('publish/images/'));

});

gulp.task("revision",['bulid'],function(){

gulp.src(['template/head-js.html', 'template/baidu.html']).pipe(plugins.concat('head-js.html')).pipe(gulp.dest('publish/template/'));

return gulp.src(['publish/css/*.css','publish/scripts/config.js','publish/images/**/*'],{base: 'publish'})

.pipe(plugins.rev())

.pipe(gulp.dest('publish/'))

.pipe(plugins.rev.manifest({

merge: true

}))

.pipe(gulp.dest('publish/'));

});

gulp.task("publish", ["revision"],function(){

var manifestCss = gulp.src("publish/rev-manifest.json"),

manifestDownload = gulp.src("publish/rev-manifest.json"),

manifest = gulp.src("publish/rev-manifest.json");

gulp.src('publish/css/*.css')

.pipe(plugins.revReplace({manifest: manifest}))

.pipe(gulp.dest('publish/css/'));

gulp.src('*.html')

.pipe(plugins.revReplace({manifest: manifestCss}))

.pipe(gulp.dest('publish/'));

gulp.src('publish/download/*.html')

.pipe(plugins.revReplace({manifest: manifestDownload}))

.pipe(gulp.dest('publish/download/'));

});复制代码

上面是我曾经本身配置的一个打包构建gulpfile，里面作了上述我提到的全部事情，除了js模块化打包以外，这个你们能够本身研究下，比较简单。我来解释下各个任务的做用。

• default， 主要是监听less变化生成css。

• clean， 清除掉publish文件夹的内容

• bulid，把源码移动到publish文件夹下面，对于一些类型的文件作处理，例如css的压缩，js的压缩，图片的压缩缓存等等。

• revision，md5文件，根据html，css的引用来给相关的文件添加md5戳，生成新的md5戳文件，来保持文件更新。

• publish，根据上面 revision生成的新的md5文件来作一次文件替换，替换里面js，css，image的引用路径。

其实有些地方能够优化的，这个你们有时间能够本身去试试。

以上就是这个系列的第一篇文章，欢迎吐槽和讨论各类问题，第二篇文章会以Webpack为主，来解释它的配置方案。