文章来源近年来，前端的发展越来越迅猛，各种新人加入了前端的大家庭，并且大有赶超IOS的趋势。!同时，新人提出了各种前端工作问题。除了最基本的html、css、js三轴外，最头疼的应该就是环境的配置了，所以以环境为切入点，开始一系列前端开发环境配置文章.主要涉及打包、构建、编程工具、调试等前端环境，以及前后端分离，Nodejs中间层扩展面的使用。工欲善其事，必先利其器。在编程工具方面，WebStorm、sublime、Atom、VSCode、Brackets等都是大推。我个人认为这在这方面并不重要。胡萝卜和蔬菜各有喜好。优点和缺点基本相同。显然，这取决于个人的接受程度。我给大家举几个例子：WebStorm非常全面，无论是纯前端还是Nodejs，包括git、svn、命令行、格式化工具。使用方便，而且还直接支持nodejs的debug。作为一款前端全能的重量级IDE，非常不错。唯一的缺点就是太重了，体现在内存占用和启动时间上。sublime是一个轻量级的文本编辑器，3相比2有很大的进步，小巧灵活是最大的特点，麻烦的是各种插件的配置，需要自己组合，不熟悉的人远不如WebStorm方便，快捷。而且每次新电脑都要配置，比较麻烦。（现在有办法导出配置文件，适用于新电脑）Atom和sublime类似，比较轻量级，内核主要是Nodejs写的，前端喜欢，因为更适合前端技术栈，但是大文件的性能有问题一直被人诟病不是很流畅，插件还是比sublime少了很多。整个生态不如sublime，但是因为是github发布的，所以还是受到了很多人的青睐。我贡献的一个vue格式化插件，VSCode和Brackets，比较小众，很少用到。用过VS，感觉还不错，就是生态差了点，很多插件的说明写的不好。人们无法理解。各方面的资料也比较少。Brackets的同事用过，提示比较好，个人觉得非常好上手。貌似也能及时浏览网页效果。个人建议入门时使用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的流特性来组织整个构建链。官方核心只提供了几个方法，大家以官方API为准。编写自己需要的处理插件，然后组合起来完成构建功能。基本概念和Grunt很相似，但是有很多不同，比如：配置和运行分离，插件职责单一，规则大于配置等等。关于这两个的比较有很多，可以搜索Grunt一口下去就知道了。新王者Webpack就不多说了。个人感觉应该是2015年上半年到2016年初，Webpack横空出世，一举统一整个前端构建生态的趋势。现在的FE好像对Webpack一窍不通，不好意思说他是前端。最初，Webpack应该只与requirejs和browserify等模块化工具进行比较，但其灵活的API和丰富的加载器使其能够完成Gulp等构建事件。目前其生态环境非常好，各种插件层出不穷。比较流行的React、vuejs等都有相关的针对性loader来优化构建方式，可以说是目前最流行的工具。但是缺点也特别明显，就是比较难理解，主要是太灵活了，接受方式多种多样，导致没有一个统一的标准，配置起来特别难受。群里一般都是Webpack的配置问题最多的。很多新手感觉Webpack的各种配置错误，想哭，想死。相关文章也很多，推荐题叶的入门指南。一种强大且改进的NPM构建方法。这个阮一峰吐槽前端构建的变化，说新的构建工具是ES6构建工具。推荐阅读何士君的回答。如何评价阮一峰所说的前端工具日新月异的言论？个人目前主要使用Webpack来构建。当然，由于历史原因，一些较旧的系统代码仍然使用Gulp构建，Gulp+Webpack也在切换。更丰富多彩（实际上有点混乱）。三只松鼠--干货);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/'));returngulp.src('less/company.less').pipe(less()).pipe(gulp.dest('css/'));});gulp.task('clean',function(){returngulp.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/'));returngulp.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/'));returngulp.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(){varmanifestCss=gulp.src("publish/rev-manifest.json"),manifestDownload=gulp.src("publish/rev-manifest.json"),manifest=gulp.src("publish/rev-manifest.json");gulp.src('发布/css/*.css').pipe(plugins.revReplace({manifest:manifest})).pipe(gulp.dest('publish/css/'));gulp.src('*.html').pipe(插件。revReplace({manifest:manifestCss})).pipe(gulp.dest('publish/'));gulp.src('publish/download/*.html').pipe(plugins.revReplace({manifest:manifestDownload})).pipe(gulp.dest('发布/下载/'));});上面是我自己配置??的一个packagebuildgulpfile，除了js模块化打包，它完成了我上面提到的所有事情，这个大家可以自己研究，比较简单，我来解释一下各个任务的作用。default，主要是监控少改动生成css。clean，清空publish文件夹bulid的内容，把源码移到publish文件夹，处理一些类型的文件，比如css压缩，js压缩，图片压缩缓存等revision，md5文件，加上md5戳相关文件根据html、css引用，生成新的md5戳文件，保持文件更新。发布，根据上面改版生成的新md5文件做一个文件替换，替换里面的js、css、image的引用路径。其实有些地方是可以优化的，大家有时间可以自己试试。以上是本系列的第一篇文章。欢迎大家投诉和讨论各种问题。第二篇文章将围绕Webpack来讲解其配置方案。
