Gulp,Grunt,Webpack

之前一直对于Grunt,Gulp,Webpack它们之间到底是什么关系
一直迷惑不已,最近对于Gulp的学习中,算是对于它们有了初步的了解.

其实GruntGulp,与webpack不是一回事!

Gulp应该和Grunt相互比较.它们都是一种工具能够优化前端的工作流程.像是sass的编译,自动添加css前缀,压缩css,js的校验合并压缩,监视功能.使用Grunt/Gulp,然后配置需要的插件,就可以让你脱离繁琐的手工操作,让这些自动化工具帮你完成.

webpack是一种JS模块化的方案,和它功能类似有browserify,seajs,requirejs.虽然他们都是解决JS模块化的方案,但是他们之间还是有区别的.

  • seajs/requirejs : 是一种在线’编译’的的模块方案.怎么说就是,在页面上加载了AMD或者CMD解释器,然后浏览器可以通过这样的一个解释器,知道上面两个模块化规范的规则,就能认识define,exports,module等.
  • webpack/browserify : 这是一个’预编译’模块的方案,它们不需要在浏览器当中加载,你只需要在本地写好符合模块化规范n的JS文件,然后通过相应的编译工具,就能编译成浏览器能识别的JS文件.

当然gulp等自动化工具也能通过插件,使用像是webpack这样的模块化方案.

接下来主要讲讲我醉经了解的自动化工具Gulp

预处理与后处理器

预处理器

说到预处理器,sass,less,stylus都是目前比较主流的预处理器.用过像是sass这样的预处理器都知道,他们会有自己的一套语法,像是变量,函数,嵌套,混合器,继承等,然后再编译成浏览器能识别的css代码.这样,编译前和编译后是完全不同的语言

实现原理

  1. 首次取到预处理器的源代码的分析树
  2. 将有动态生成的,比如一些变量和函数的分析树,转化成静态分析树
  3. 将静态分析树转化为css的分析树
  4. css分析树转化为css代码

后处理器

而css后处理器是对css代码进行处理,最终生成的还是css代码,编译前的和编译后的代码都是css.

实现原理

  1. 先将源代码做css解析,获得分析树
  2. 对于得到的cs分析树,做后处理
  3. 将后处理好的css分析树,转换成css代码

比较

我感觉css预处理器可以算是一个新的语言新的语法,这样会增加我们的学习成本与使用门槛,而且可能会因为预处理器跟不上留恋器或者其他的版本的更迭而出现问题.而后处理器原先就是css语法,几乎是0门槛,它对于css分析树的处理是依据can i use网站实时的更新.但是css预处理器的强大之处在于逻辑能力的处理能力强,灵活,改善项目结构,而后处理器在这方便就显得拙荆见肘了.

CSSGrace

Gulp

看网上大家对于GruntGulp的比较,好像Gulp比起Grunt配置更简单而且更容易阅读和维护,Gulp还支持管道处理!so,我就入坑Gulp.

Gulp一般都是配合相应的插件来完成一些具体的任务的.

gulp.task是用来创建任务的,gulp-src是设置需要处理的文件的路径(可以是多文件数组,也可以是正则表达式),gulp-dest是设置生成文件的路径(可以在一个插件结束之后立即保存,之后继续管道到下一个插件处理).

下面就列举一些常用的插件:

gulp-ruby-sass + gulp-autoprefixer + gulp-minify-css

上面这些插件的组合可以实现sass的编译,自动添加前缀,压缩.

gulp-jshint + gulp-concat + gulp-uglify

实现js代码的校验,合并和压缩,之前对于gulp-concat的合并有写疑惑?比如有些文件有依赖关系.查资料之后好像可以用webpack插件或者gulp-order来控制顺序之类的.

还有压缩图片,清除文件,这只默认任务,监听文件,自动刷新页面之类的插件的使用就不做累述了.

遇到的问题

之前参考一篇gulp的教程,上面gulp-sass插件是这么使用的

1
2
3
4
5
6
7
8
9
10
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});

会报这样的错误:Gulp.js TypeError: glob pattern string required

在stackoverflow上的解答之后才知道gulp-sass的API已经改变的了需要已这样的方式使用此插件:

1
2
3
4
5
6
gulp.task('styles', function () {
return sass('sass/*.scss', {
style: 'XXXXXXX'
})
.pipe(XXXXXX);
}

在使用gulp-jshint插件的时候遇到这样的报错:Gulp Error: Cannot find module 'jshint/src/cli',
原因是只是安装了gulp-jshint没有安装jshint,然后

1
npm install --save-dev jshint gulp-jshint

最近的感想

最近可能是感觉到了下一个寒假结束之后自己马上就要投投简历,找实习了.前几天又帮一个学长答笔试题:),看到现场来参加笔试的人是如此之多,竞争压力是如此之大(好像是几千人,就招三四十个人..)

也看到了一些同龄的也在学前端的在校大学生,感觉虽然自己学前端有段时间了,但是现在掌握的东西都是个p!!!!

就说最近看到的一个三本学校的大四学长的2015总结,上面提到的名词都有:Flex,react,Angular,sass,PHP,Redis,MongoDB,vue…

还是菜啊,加油吧,自己!