Grunt、gulp、webpack、不要听着高大上你就上,试试Codekit?

时间:2022-05-17 16:47:04

Grunt、gulp、webpack、不要听着高大上你就上,试试Codekit?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不是早就处理完了么,这里根本就不需要了!!!

项目目录结构可以是这样:

Grunt、gulp、webpack、不要听着高大上你就上,试试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