下載地址:https://incident57.com/codekit/
要編譯Less、Sass、Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown & javascript?
Npm包依賴版本的痛
估計第一個想到的就是用Nodejs +npm來處理,嗯,什麼grunt 、Gulp、webpack之類的,但我相信不少人肯定是被npm的各種包的版本所累過,
動不動就安裝錯誤,動不動就一大堆warnning,你這臺機器安裝OK了,換另一個新來的同事安裝還是會報各種錯。
Node_modules專案檔案過多過大
由於每個專案都要npm install安裝一回—save-dev到本地,所以每個專案都包含一個node_modules的資料夾,裡面是各種npm包。
如果像我一樣要新建很多運營活動專案,你就會發現檔案越來越多,總感覺不爽
解放生產力
Codekit就是Mac平臺下的前端利器,我就是愛GUI的工具。沒辦法,使用者體驗好,反正我也不是一個合格的程式猿.
你非要命令列?(╯°□°)╯︵ ┻━┻。
可編譯幾乎所有你知道的
Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown & Javascript
自動刷瀏覽器
不僅是重新整理PC,Mac,還能自動重新整理手機上開啟的頁面,不再需要手動重新整理頁面了.
最喜歡的一點是,如果你只更新了CSS檔案,瀏覽器只會重新渲染,而不會重新整理整個頁面,並且不需要安裝瀏覽器外掛。
Bower 內建
直接搜尋下載各種js庫, 6000+的元件,Bootstrap, jQuery, Modernizr, Zurb Foundation, even WordPress. 額,這個功能我很少用
不需要命令列
直接拖放資料夾進去就可以
檔案自動壓縮,SourceMap自動生成
CSS及JS檔案自動壓縮,JS還可以混淆,sourcemap自動生成
合併JS檔案
在檔案前面加入
// @codekit-prepend " jquery.min.js", "vue.min.1.0.24.js";
在檔案後面加入
// @codekit-append "weui.js"
優化圖片
雖然codekit自帶壓縮功能,但個人推薦使用ppduck工具來壓縮,壓縮率更高
Framework功能
即可以將常用的庫或者自己的工具方法拖到Framework後就可以在各種不同專案內直接引用,而不再需要copy檔案了
更自帶了常用框架,如Compass、Bourbon、Zurbfondation等等
OK,至此你已經可以很好的完成開發工作了,直接利用FTP什麼的上傳到伺服器就可以了。
利用Gulp更進一步處理檔案
不是說不需要這些了嗎?
哪有什麼銀彈啊小夥子...
如果你對部署還有一定要求,那麼…
利用Gulp對檔案進行MD5
部署檔案情況還是複雜的,複雜的意思是指每個公司、每個團隊面臨的部署環境及方法不一樣,例如最簡單的上傳就有可能是FTP或SSH或Git。
所以在部署階段是需要較強的靈活性自定義,而這時gulp之類的工具發揮的作用就大了,這裡才要真正用上。
比如為了防止更新時快取的影響,對檔名進行MD5化就很有用,這裡可以用gulp-rev和gulp-rev-collector這兩個npm包,而對HTML進行最小化,也可以用上gulp-htmlmin包。
其它的CSS,JS混淆,壓縮不用了嗎?
_(:з)∠)_ 我去…前面Codekit不是早就處理完了麼,這裡根本就不需要了!!!
專案目錄結構可以是這樣:
dev目錄為開發目錄
此目錄中用Codekit處理專案檔案
dist目錄為部署目錄
是用gulp處理dev目錄後生成的資料夾,此資料夾內的檔案可以用於正式部署
gulpfile.js也很簡單
/** * 為資源替換上MD5名稱用於更新時防止快取 */ /** * 安裝命令 * npm install gulp gulp-htmlmin --save-dev * npm install gulp gulp-rev --save-dev * npm install gulp gulp-rev-collector --save-dev */ var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); // https://github.com/jonschlinkert/gulp-htmlmin var rev = require('gulp-rev'); // https://www.npmjs.com/package/gulp-rev/ var revCollector = require('gulp-rev-collector');// https://www.npmjs.com/package/gulp-rev-collector // 處理css gulp.task('buildCSS', function(){ return gulp.src(['dev/css/*.css']) .pipe(rev()) .pipe(gulp.dest('dist/css/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/css/')) }); // 處理JS gulp.task('buildJS', function(){ return gulp.src(['dev/js/*.js']) .pipe(rev()) .pipe(gulp.dest('dist/js/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/js/')) }); // 處理圖片 gulp.task('buildIMG', function(){ return gulp.src('dev/img/**/*') .pipe(rev()) .pipe(gulp.dest('dist/img/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/img')); }); // 在css中替換background-image中image名稱 gulp.task('reversionCSSImage', function(){ return gulp.src(['dist/rev/**/*.json', 'dist/css/*.css']) .pipe(revCollector()) .pipe(gulp.dest('dist/css')); ; }); // 為js、css、image 替換上md5名檔案 gulp.task('reversionFiles', function(){ gulp.src(['dist/rev/**/*.json', 'dev/**/*.html']) .pipe(revCollector({ replaceReved: true, dirReplacements: { 'css': 'css' ,'js': 'js' ,'img': 'img' ,'http://': function(manifest_value, b) { // 絕對路徑的地址不替換檔名 return false; } } })) .pipe(htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('dist')) ; gulp.start('reversionCSSImage'); }); // 執行gulp任務 gulp.task('default', ['buildCSS', 'buildJS', 'buildIMG'], function(){ gulp.start('reversionFiles'); });
https://github.com/willian12345/Tiki-scaffold
下載後命令列,注意確保最新nodejs版本,及Gulp
1、根目錄,npm install
2、每次釋出時根目錄執行gulp 即可
遺憾的是codekit並沒有windows版本
如果你是windows使用者,那麼請轉用Mac
當然,其實還是有類似的工具的在Windows上,比如
都是優秀的前端構建工具,選一款適用你,適用團隊的才是最重要的!!!
注:轉載請註明出處部落格園:sheldon-二狗-偷飯貓(willian12345@126.com)
https://github.com/willian12345