建站
咨詢
售后
建站咨詢
新聞中心
文章來(lái)源
創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括臨朐網(wǎng)站建設(shè)、臨朐網(wǎng)站制作、臨朐網(wǎng)頁(yè)制作以及臨朐網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，臨朐網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到臨朐省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
最近幾年，前端發(fā)展越來(lái)越迅速，各種萌新加入了前端這個(gè)大家庭，大有趕IOS、超Android的趨勢(shì)呀!同時(shí)，萌新們提出了各種前端工作問(wèn)題，除了最基礎(chǔ)的html、css、js三板斧之外，最讓人頭疼的應(yīng)該是關(guān)于環(huán)境的配置問(wèn)題，所以以環(huán)境作為切入點(diǎn)，開(kāi)始一系列的前端開(kāi)發(fā)環(huán)境配置文章。
主要會(huì)涉及到打包、構(gòu)建、編程工具、debug等等前端環(huán)境，以及前后端分離、Nodejs中間層使用伸展面。
工欲善其事必先利其器
以編程工具而言WebStorm、sublime、Atom、VS Code、Brackets等等一大推，這方面我個(gè)人是覺(jué)得無(wú)所謂，蘿卜青菜各有所愛(ài)，優(yōu)缺點(diǎn)基本很明顯，就看個(gè)人的接受情況了，舉點(diǎn)例子說(shuō)下吧：
- WebStorm 很全面，無(wú)論是純前端還是Nodejs，包括git、svn、命令行、格式化工具都有，使用順手之后各種方便，而且還直接支持nodejs的debug，作為前端的全能重量級(jí)IDE非常不錯(cuò)，唯一不好的就是太重，體現(xiàn)在內(nèi)存占有，啟動(dòng)時(shí)間上。
- sublime 輕量級(jí)文本編輯器，3比較2來(lái)說(shuō)有很大提升，小巧靈活是最大的特點(diǎn)，麻煩的是各種插件的配置，需要自己來(lái)組合，不熟悉的人用起來(lái)遠(yuǎn)遠(yuǎn)不想WebStorm方便，快捷。而且每次新的電腦都要配置一次，比較繁瑣。(現(xiàn)在有可以導(dǎo)出配置文件來(lái)適用新電腦的方法)
- Atom類(lèi)似sublime，比較輕量級(jí)，內(nèi)核主要是Nodejs寫(xiě)出來(lái)的，前端各種愛(ài)，因?yàn)楸容^適合前端的技術(shù)棧，但是大文件的性能問(wèn)題一直受人詬病，不是很流暢，還有就是插件比起sublime來(lái)說(shuō)還是少了不少，整個(gè)生態(tài)不如sublime，但是因?yàn)槭莋ithub出的，還是受人青睞不少。我貢獻(xiàn)的一個(gè)vue格式化插件
- VS Code 和 Brackets這兩個(gè)比較小眾，使用的很少，我用過(guò)VS，感覺(jué)還挺不錯(cuò)，就是生態(tài)更差，而且很多插件的說(shuō)明寫(xiě)的很糟糕，讓人看不懂。各方面的資料也比較少。Brackets 一個(gè)同事使用過(guò)，提示比較好，個(gè)人感覺(jué)入門(mén)很不錯(cuò)。貌似還能及時(shí)瀏覽web效果。
個(gè)人建議使用入門(mén)的時(shí)候使用sublime或者Atom就可以，配置一下自己喜歡的插件，基本就可以開(kāi)始干活了，當(dāng)然如果是用eclipse已經(jīng)很習(xí)慣的人，我覺(jué)得WebStorm這種重型機(jī)槍?zhuān)赡芨m合你。不要對(duì)工具的提示產(chǎn)生依賴(lài)太過(guò)于嚴(yán)重，否則很多東西自己會(huì)慢慢遺忘的哦!!!
PS：如果要提升自己的逼格怎么辦?請(qǐng)使用VIM或者Emacs這種高逼格的編輯方法。
木牛流馬
糧草生產(chǎn)的快，也要有好的運(yùn)輸工具才能上到前線，對(duì)于前端而言，屬于我們的運(yùn)輸工具是打包構(gòu)建工具。
打包構(gòu)建工具經(jīng)歷了各種不同的時(shí)代，從服務(wù)端主宰的打包構(gòu)建，到現(xiàn)在前端自己主宰的構(gòu)建工具，不同的需求產(chǎn)生了各種不同的構(gòu)建工具，這些工具其實(shí)也算前端的工作能力之一，因?yàn)槊恳环N新的工具都有優(yōu)缺點(diǎn)，熟悉的使用也并非特別簡(jiǎn)單的事情。
先來(lái)說(shuō)說(shuō)都有哪些不同的種類(lèi)吧：
- 后端為主要的整體打包工具，這個(gè)以FIS作為代表，大家或多或少都應(yīng)該知道百度出的這個(gè)開(kāi)源打包構(gòu)建工具鏈，從整體上解決了前端工程的問(wèn)題，包括優(yōu)化、資源加載、模塊打包、自動(dòng)化、部署一系列問(wèn)題，從功能上看非常全面，F(xiàn)IS3的升級(jí)讓人也感覺(jué)很是不錯(cuò)，不再依賴(lài)PHP和java之類(lèi)的服務(wù)端語(yǔ)言，基于Nodejs來(lái)做，更加貼近前端社區(qū)。那么缺點(diǎn)是什么呢： 生態(tài)環(huán)境不夠豐富，主要插件應(yīng)該還是百度自己人提供的，參與進(jìn)來(lái)的社區(qū)人數(shù)不夠多。我覺(jué)得這方面的原因是fis2當(dāng)時(shí)對(duì)PHP和JAVA的依賴(lài)，導(dǎo)致大家對(duì)fis的興趣不弄，錯(cuò)過(guò)了最佳時(shí)機(jī)，這個(gè)其實(shí)跟百度自己的web的技術(shù)棧有很大關(guān)系。同時(shí)帶來(lái)的好處是，F(xiàn)IS可以結(jié)合PHP做整體網(wǎng)站的部署和構(gòu)建。以上主要是看文檔的一些分析，本人并沒(méi)有用過(guò)FIS，有說(shuō)錯(cuò)請(qǐng)拍磚。這類(lèi)的打包構(gòu)建工具還有很多，大部分都是大公司的內(nèi)部使用，例如京東、馬蜂窩之類(lèi)，都是PHP為主，加上前端的整體構(gòu)建工具。
- Grunt派系，這個(gè)應(yīng)該是比較早的Nodejs打包構(gòu)建工具，一度很是流行，Grunt的好處是提供了一個(gè)核心的構(gòu)建規(guī)范，基于文件，來(lái)使用各種Grunt的插件組合整個(gè)構(gòu)建行為，當(dāng)時(shí)我記得比較清楚的是我前面文章提到過(guò)的Yeoman這個(gè)構(gòu)建工具，核心就是Grunt，自動(dòng)生成了各種插件配置。但是這個(gè)有很大的缺點(diǎn)：一是構(gòu)建的配置文件寫(xiě)的很長(zhǎng)很啰嗦，二是效率不是很高，原因是它構(gòu)建的方式基于文件的，每次都會(huì)產(chǎn)生新的臨時(shí)文件，這樣無(wú)形中就會(huì)有磁盤(pán)的I/O讀寫(xiě)，所以會(huì)降低整體的構(gòu)建速度。
- Gulp新體系，因?yàn)橐陨系腉runt的缺點(diǎn)，Gulp應(yīng)運(yùn)而生，借鑒了Unix的管道概念，用Nodejs的stream特性，來(lái)組織整個(gè)構(gòu)建鏈條，在官方的核心只提供幾個(gè)方法，大家基于官方API來(lái)編寫(xiě)自己需要的處理插件，再組合起來(lái)，完成構(gòu)建功能。和Grunt的基本理念很像，但是很多又有區(qū)分，例如：配置和運(yùn)行分離，插件單一職責(zé)，規(guī)定大于配置等等。關(guān)于這兩個(gè)的比較有很多，大家可以搜搜Grunt Gulp 就知道了。不多說(shuō)
- 新的王者Webpack，個(gè)人感覺(jué)應(yīng)該是15年上半年到16年初，Webpack橫空出世，大有一舉統(tǒng)一整個(gè)前端構(gòu)建生態(tài)的趨勢(shì)，貌似現(xiàn)在FE們不會(huì)點(diǎn)Webpack相關(guān)的，都不好意思說(shuō)自己是前端了。最初Webpack應(yīng)該只是和requirejs、browserify之類(lèi)模塊化工具比對(duì)，但是其靈活的API和豐富的loader，致使它可以連帶完成Gulp之類(lèi)的構(gòu)建事件，目前其生態(tài)環(huán)境巨好，各種插件層出不窮，比較火的React，vuejs等都有相關(guān)的針對(duì)性loader來(lái)優(yōu)化構(gòu)建方式，可以說(shuō)是目前最流行的工具。不過(guò)缺點(diǎn)也特別的明顯，就是難懂，主要是過(guò)于靈活，各種方式都能接受，導(dǎo)致沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，配置起來(lái)特別難受，在群里，一般對(duì)于Webpack的配置問(wèn)題的是最多的。很多新手對(duì)于Webpack的各種配置錯(cuò)誤，感覺(jué)都欲哭無(wú)淚，想死的心都有了。相關(guān)的文章也很多，推薦題葉的入門(mén)指南。
- 逼格提升的NPM構(gòu)建方式。這個(gè)阮一峰對(duì)于前端構(gòu)建的變化吐槽過(guò)，說(shuō)新的構(gòu)建工具就是ES6的構(gòu)建工具。推薦看賀師俊的答案如何評(píng)價(jià)阮一峰關(guān)于前端工具變化快的言論?
就我個(gè)人而言，目前主要還是使用的Webpack來(lái)構(gòu)建，當(dāng)然一些比較老的系統(tǒng)代碼，由于歷史原因，還是使用的Gulp來(lái)構(gòu)建，也有正在切換之中的，Gulp+Webpack。比較豐富多彩(其實(shí)有點(diǎn)混亂)。
三只松鼠--干貨
- 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/'));
- });
上面是我曾經(jīng)自己配置的一個(gè)打包構(gòu)建gulpfile，里面做了上述我提到的所有事情，除了js模塊化打包之外，這個(gè)大家可以自己研究下，比較簡(jiǎn)單。我來(lái)解釋下各個(gè)任務(wù)的作用。
- default， 主要是監(jiān)聽(tīng)less變化生成css。
- clean， 清除掉publish文件夾的內(nèi)容
- bulid，把源碼移動(dòng)到publish文件夾下面，對(duì)于一些類(lèi)型的文件做處理，例如css的壓縮，js的壓縮，圖片的壓縮緩存等等。
- revision，md5文件，根據(jù)html，css的引用來(lái)給相關(guān)的文件添加md5戳，生成新的md5戳文件，來(lái)保持文件更新。
- publish，根據(jù)上面 revision生成的新的md5文件來(lái)做一次文件替換，替換里面js，css，image的引用路徑。
其實(shí)有些地方可以優(yōu)化的，這個(gè)大家有時(shí)間可以自己去試試。
以上就是這個(gè)系列的第一篇文章，歡迎吐槽和討論各種問(wèn)題，第二篇文章會(huì)以Webpack為主，來(lái)解釋它的配置方案。
分享名稱(chēng)：如何打造一個(gè)令人愉悅的前端開(kāi)發(fā)環(huán)境（一）
網(wǎng)頁(yè)鏈接：http://www.5511xx.com/article/cdcssop.html
