做一点关于Gulp的记录

这是一篇很浅的文章,请不要抱有太多期待+_+

可能在几年前,前端开发可能还只是个体力活,开发师所掌握的领域除了CSS就只有JavaScript了,但前端还是在网页开发里属于一个很重要的环节,直到现在可能前端已经是一个网站的全部了。

想想在自己初中的时候,下载了一份还是Macromedia的Dreamweaver,也不知道这个软件到底有什么用,捣鼓了半天无解就放弃了。同时也想了想自己现在使用的Phpstorm,同样也没有摸透这个IDE的全部功能。就和当年Dreamweaver一样,面对这么强大的IDE软件,有没有什么办法能提高自己的效率同时又不用花费太多时间研究IDE的特性呢?于是就找到了一个能帮助到我的做前端开发的工具 — Gulp

Gulp是什么?

Gulp 是一款基于任务的设计模式的自动化工具,能给你的开发效率来一次飞跃。

什么太简单了?那这里还有一篇比较详细的介绍。简单来说Gulp能帮到你无微不至,让你从此感觉写代码是如此开心(误)。

那Gulp到底怎么用?

首先当然是安装她啦!

$ npm install --global gulp

当然你也可以使用devDependencies或者package.json来进行安装。
之后你就可以在你项目的根目录上建立一个gulpfiles.js的文件。

var gulp = require('gulp');

gulp.task('default', function() {

});

gulp.task('ooxx', function() {

});

这样,只要在命令行里输入

$ gulp

或者

$ gulp ooxx

就可以分别执行default或者ooxx的任务了。

是不是很简单?
所以只要使用了Gulp,搭配其拓展就可以提高你开发的速度。

一个简单的例子:Compile Less

var less = require('gulp-less');

gulp.task('less', function () {
    return gulp.src('less/**/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'));
});

这样,你less文件夹底下所有的less文件变成在css文件夹里的css文件。

当然Gulp不止可以用来只做一个方面的任务,他还可以这样:

gulp.task('css', function () {
    var stream = gulp
            .src(['src/less/style.less'])
            .pipe(sourcemaps.init())
            .pipe(less().on('error', notify.onError(function (error) {
                return 'Error compiling LESS: ' + error.message;
            })))
            .pipe(autoprefixer());
    stream.pipe(minifycss());
    return stream
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('css'))
            .pipe(notify({message: 'Successfully compiled LESS'}));
});

这段代码不仅生成了css文件同时也最小化了你的css文件,更提供了一份样式文件的Source Map,这样你在前台的时候也不会害怕找不到自己的样式在哪一个less或者scss文件里了。

我懂了,但还有什么好玩的东西吗?

Gulp Watch
功能和大多数IDE软件的File Watch一样,侦测你项目里的css,js,image亦或者是image的变化来compile。个人感觉比Phpstorm的File Watch好用太多。

Live Reload
一个很好用的功能,虽然不是Gulp本家的,但是与gulp watch一起使用的话效果卓越。作用就是不用刷新的情况下,通过其port来加载你修改过的脚本或者样式文件。

// Load plugins
var gulp = require('gulp'),
    livereload = require('gulp-livereload');
// Watch task
gulp.task('default', function () {
    livereload.listen({host: null});
    gulp.watch([
        'the/path/you/want/to/go',
         ]).on('change', livereload.changed);
});

推荐搭配使用的是Chrome的一个插件,好处是自由加载,比用gulp加载js文件结果导致你没有开live reload的网页慢的要死好太多了。

CSS Sprite
其实我以前做Sprite图一直是用PhotoShop老老实实一个一个做上去的,然后再自己算background position。现在想想 — 呵呵=.=

后话

为什么使用gulp?原因很简单,第一次使用的工具。虽然后面自己也断断续续使用过grunt或者是compass,但是还是对gulp情有独钟,或许只是自己懒而已。Lilim主题在使用gulp一起开发的情况下,速度飞跃,但是还是抵不过自己的懒癌晚期。综上所述,不怕神一样的对手,就怕猪一样的队(zi)友(ji)

PS1:如果你对gulp感兴趣,可以试着去摸索她,你已经会喜欢她的。如果已经和她交往很久请继续爱戴她呵护她。
PS2:有了她,我终于不需要这个网页

More?

Credits 41139382

This work is licensed under a cc by-nc-sa 4.0.