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

一、根目录，npm install

二、每次发布时根目录执行gulp 便可

 

 

 

遗憾的是codekit并无windows版本

若是你是windows用户，那么请转用Mac

固然，其实仍是有相似的工具的在Windows上，好比

koala

weFlow

 

都是优秀的前端构建工具，选一款适用你，适用团队的才是最重要的!!!

 

 

---

 

 

注：转载请注明出处博客园：sheldon-二狗-偷饭猫(willian12345@126.com)

https://github.com/willian12345