Grunt、gulp、webpack、不要聽着高大上你就上,試試Codekit?


 

下載地址: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上,比如

koala

weFlow

 

都是優秀的前端構建工具,選一款適用你,適用團隊的才是最重要的!!!

 

 


 

 

注:轉載請注明出處博客園:sheldon-二狗-偷飯貓(willian12345@126.com)

https://github.com/willian12345

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM