Gulp玩起来

一点点前言

之前用过下面这两款跨平台软件,感觉功能相对比较局限。

  • 微信 TmT 团队开发的weflow
  • 前端预处理器语言图形编译工具Koala

修修补补了几天终于把gulp搭建起来了,这次终于像样了些,至少比前面两款工具拓展了不少,gulp的强大之处不用多说,非常值得把玩。先来看看这次主要实现了哪些功能吧!

  1. Sass语法编译;
  2. 静态资源压缩(包含html,css,js以及img);
  3. Css3自动前缀
  4. Image Sprite(图片精灵)
  5. md5后缀添加
  6. 路由及文件合并
  7. 页面模块iclude功能
  8. 浏览器同步刷新

这次就是为了实现第7个iclude功能很是花费了一番功夫。


首先gulp环境搭建。

1.默认安装好Node,首先全局安装gulp

$ npm install --global gulp

2.建议安装淘宝镜像cnpm,相比下载快的不是一点点。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3.下载hello-gulp'

$ git@github.com:kpengWang/hello-gulp.git

4.直接安装所有packge里所有插件

$ cnpm install
依赖安装完成
依赖安装完成

至此依赖安装完成显示

一点小提示:

  1. 命令行里“--global”可以简写为“-g”
  2. "install" 可以直接用一个“i”代替
  3. 例如全局安装gulp 可以直接用" npm i --g gulp"

基本介绍

如果需要看gulp的简介,可以看看前端构建工具gulpjs的使用介绍及技巧
这里为了能直接上手,不做过多赘述,先来看看默认目录各个文件目录的作用。

结构目录
结构目录

在依赖完依赖后,会多一个“node_modules”文件夹,里面放的都是我们需要用到的对应版本依赖,在windows开发环境会发现很多“多余的”依赖,那是因为npm升到3之后,所有的依赖模块被拍扁了,全都放在一个目录下。

node依赖
node依赖

实际用法

在gulpfile.js最后分别放了三个task。

// Dev Sequences
gulp.task('dev', function(callback) {
    runSequence(
        'clean:dev', ['include', 'sprite', 'sass', 'minifyJs', 'minifyFont'],
        'clean:include',
        callback
    );
});

// Build Sequences
// ---------------
gulp.task('build', function(callback) {
    runSequence(
        'clean:dist', ['usemin', 'images:dist', 'fonts:dist'], 'rev', 'minifyHtml',
        callback
    );
});

// Default Sequences
gulp.task('default', function(callback) {
    runSequence(['sass', 'browserSync'], 'watch',
        callback
    );
});

1- gulp

1.在终端执行gulp,浏览器会自动打开一个静态服务器地址

$ gulp
直接执行gulp
直接执行gulp

浏览器会自动打开localhost:3000并产生如下页面, 此时这里的include页面还没有编译,因为我将它分解到下一个动作里,也就是我们的生产环境里。

gulp返回页
gulp返回页

2.在终端执行gulp dev,会自动生成一个dev文件夹,这里做静态资源压缩,同时编译对应的"include"模版。

2- gulp dev

$ gulp dev
执行结果
执行结果

dev目录里的index.html DOM结构及页面如下

展开DOM
展开DOM

页面
页面

3- gulp build

3.最后执行gulp build 命令,会产生应该dist 文件夹,这也是我们最终上线版本,做更极致一些处理,会做静态资源(css和js)合并,响应链接加上md5后缀。

执行结果
执行结果

此时index.html 会如图。

最后压缩结果
最后压缩结果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,833评论 1 32
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 5,080评论 0 10
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 4,472评论 0 3
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 5,960评论 4 50
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    build1024阅读 3,486评论 0 0