前端工具系列之一 Gulp

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

从(大约)2014年开始,前端不再是当初那个切图排版的前端了,各种MV*框架、库、工具呈井喷之势层出不穷。构建工具比较有名的如Grunt、Gulp、Yeoman、webpack;依赖管理比如bower、npm,当然最流行最广为人知的还是作为Nodejs的管理器npm;模块化出现了CMD、AMD、UMD等,例如requirejs、seajs等的。

当然,许多技术、技术思维等出现的时代甚至可以追溯至上个世纪。但进入大众视线,并逐步投产的时代却为时尚早。

作为一个怕麻烦的懒人,对于前端的繁杂工作当然是要找一个自动化工具来处理,于是我遇到了Gulp。作为自动化工具,Gulp经常被拿来和Grunt比较,孰优孰劣不能一概而论,毕竟每个人关注的地方也不一样。关于Gulp与Grunt的对比,网络上有许多总结好的特点,有兴趣的可以去搜索查看阅读,我在这里就不凑字数了。

要使用Gulp,首先要做的第一步当然是要安装她啦!Gulp是基于NodeJs的一个自动化构建工具,既然是基于NodeJs了,那么安装Gulp之前自然要保证你已经安装了NodeJS,这里我会从安装NodeJS开始。

我这里使用Ubuntu 16.04 LTS版本作为主机环境,其他版本的请自行注意差异。Windows相对Ubuntu来说就更简单了,相信难不到大家。

首先我们来安装NodeJS。Ubuntu下安装Linux有两种方案,一是采用APT安装,但此办法并没有自动安装NPM,需要手动安装;第二种方案则是下载Nodejs源码,自行编译安装。这里采用懒省事的办法——APT。

sudo apt-get install nodejs-legacy npm

回车之后,输入密码,APT就会自动帮你把Nodejs、npm安装好了。当安装过程结束后回到命令指引时候,可以输入nodejs -v npm -v 来检查安装结果。

注意:Ubutun中,NodeJS的包名有两个nodejsnodejs-legacy,而不是node

如果一切顺利,安装Gulp的前置步骤已经完成了。接下来我们安装Gulp,Gulp是作为NodeJS的一个模块存在的,因此安装的时候要用到NPM。

sudo npm install -g gulp

这一步结束之后,Gulp安装就结束了。接下来就到了关键时刻啦,配置Gulp的task,Gulp虽然是自动化构建工具,但还是需要我们来给她指定task,让她安装我们指定的task来工作,她还没聪明到猜测我们要做什么、怎么做。

Gulp的API较之Grunt少的多,仅仅只有4个。

gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name [, deps] [, fn])
gulp.watch(glob [, opts], tasks) || gulp.watch(glob [, opts, cb])

依靠这4个API和众多的Gulp 插件,我们就能实现许多我们需要的功能。在编写Gulp任务之前,我们首先要在当前目录安装Gulp。


sudo npm install --save-dev gulp

一切准备工作已经就绪,下面我们就进入主题,我们就来写一个简单的Gulp任务文件。
在当前目录创建一个空的文件,名字叫做gulpfile.js

var gulp = require('gulp');

gulp.task('default', function(){
    console.log("task default done");    
});

将以上代码保存在gulpfile.js里。然后在命令行终端里进入当前目录,在命令行终端里输入gulp。gulp会自动查找当前目录中的gulpfile.js,然后分析gulpfile中的任务列表,命令行中如果没参数,则默认执行 default 任务,如果指定,则执行指定的任务。

正常情况下,将会在终端中看到

task default done

这行输出,并且还有每个任务开始时间和结束时间。

以上就是一个简单的Gulp 任务,下面我会把我常用的配置发出来。我一般使用到的有几个功能。

  1. SASS编译压缩

  2. JS压缩

  3. browerSync(改动文件自动刷新HTML和CSS、JS等)

gulpfile内容如下

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    cssMinify = require("gulp-cssnano"),
    browserSync = require('browser-sync').create(),
    compass = require('gulp-compass'),
    paths = {
        scripts: ['js/*.js'],  // JS文件路径
        css: 'sass/*.scss', // scss 文件路径
    };

gulp.task('scripts', function() {
    return gulp.src(paths.scripts) // 读取JS文件
        .pipe(uglify()) // 压缩
        .pipe(gulp.dest('script/'))  //将压缩后的文件保存到 script目录
        .pipe(browserSync.stream()); // 通知browserSync 重载 JS文件
});

gulp.task("css", function() {
    return gulp.src(paths.css)  // 读取SCSS文件
        .pipe(compass({
            sass: 'sass',
            image: 'images'
        })) // 进行编译处理
        .pipe(cssMinify()) // 压缩CSS文件
        .pipe(gulp.dest('css/')) // 发布到css 目录
        .pipe(browserSync.stream()); // 通知browserSync刷新CSS文件
});

// 注册serve 任务,serve任务依赖scrips 和 css 两个任务
gulp.task('serve', ['scripts', "css"], function() {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch(paths.scripts, ["scripts"]);
    gulp.watch(paths.css, ["css"]);
    gulp.watch("*.html").on("change", browserSync.reload);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['serve']);  // 将serve 任务注册为默认任务。

在这个任务清单中,需要依赖以下插件。

gulp-uglify
gulp-cssnano
browser-sync
gulp-compass

在使用中,直接进入到当前目录中,在终端中运行gulp,将会启动一个http服务,并且打开浏览器窗口。

服务启动后,无论你修改CSS、JS还是HTML,都会自动编译压缩并且自动刷新HTML(如果需要,修改CSS、JS是不需要刷新整个页面,只会重新加载CSS、JS)。

好了,乱七八糟的这个Gulp教程到这里算是马马虎虎的收尾了。其实Gulp 还是蛮强大的,还是有许多内容没提到的,Gulp的API、插件的API这些都没有去讲解,去看一下文档大家应该就明白了。

当然,这个配置还是有不足的,Gulp官方推荐的一些最佳实践都没应用到,甚至一些功能也没有完成,比如图片压缩、公用模板引用。

图片压缩可以去查看一下gulp-imagemin,公共模板引用gulp-content-includer

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看