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

時間 2019-11-11

標籤 grunt gulp webpack 不要聽着高大試試 codekit 欄目 Node.js 简体版

原文原文鏈接

下載地址：https://incident57.com/codekit/javascript

官方網站了解更多css

要編譯Less、Sass、Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown & javascript?

Npm包依賴版本的痛html

估計第一個想到的就是用Nodejs +npm來處理，嗯，什麼grunt 、Gulp、webpack之類的，但我相信很多人確定是被npm的各類包的版本所累過，前端

動不動就安裝錯誤，動不動就一大堆warnning，你這臺機器安裝OK了，換另外一個新來的同事安裝仍是會報各類錯。vue

Node_modules項目文件過多過大java

因爲每一個項目都要npm install安裝一回—save-dev到本地，因此每一個項目都包含一個node_modules的文件夾，裏面是各類npm包。node

若是像我同樣要新建不少運營活動項目，你就會發現文件愈來愈多，總感受不爽jquery

解放生產力

Codekit就是Mac平臺下的前端利器，我就是愛GUI的工具。沒辦法，用戶體驗好，反正我也不是一個合格的程序猿.webpack

你非要命令行？(╯°□°)╯︵ ┻━┻。git

可編譯幾乎全部你知道的

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不是早就處理完了麼，這裏根本就不須要了!!!

項目目錄結構能夠是這樣：

此目錄中用Codekit處理項目文件

是用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');
});