文章泉源

近来几年，前端生长愈来愈敏捷，种种萌新加入了前端这个人人庭，大有赶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为主，来诠释它的设置计划。