gulp自动化打包(上)

gulp自动化打包(上)


文章概述

本文分为上下两篇,上篇主要介绍一些常用的gulp插件(也是此次打包主要用的gulp插件),而下篇主要以一个demo项目为例,从本地checkout出合适的git版本,压缩、合并、到最后打成zip包,发送至指定目录,做一个全面的演示。
流程预览:
gulp自动化打包(上)_第1张图片

项目结构

首先,有一个类似于这样的项目结构
gulp自动化打包(上)_第2张图片
图中主要演示项目中大概会有的几种文件类型,fonts(ttf,svg),image(jpg,png),js,less(sass),实际项目会复杂得多,开始一个项目的时候,可以直接从git上拿一个angular-seed(webpack-seed)改。

开始使用gulp

下载gulp

开始玩gulp之前,要确定自己有nodejs的环境,没有的话,先去弄个nodejs,这个比较简单,直接在https://nodejs.org/en/,下载一个对应开发环境的nodejs,然后一路next,路径默认就好,window下自定义了路径后,就不是全局的了,需要自己再配环境变量,图省事的话,就一路next到finish。

ok,安装好nodejs之后,在项目的src目录下(与index.html的同级目录)建立一个package.json文件与gulpfile.js(这个名字要对,不然命令行识别不了,项目中有时建立两个gulp的js文件,如果两个都含有同一任务,不特殊说明的话,命令行只执行文件名为gulpfile.js的任务),在命令行输入
npm install gulp --save-dev(之前没有安装过gulp的话,执行npm install gulp -g --save-dev)指令,
“–save-dev”表示在安装gulp之后,将安装的信息保存在package.json文件,以便之后利用package.json文件去install相关插件(多人开发尤其要注意保存安装信息),创建gulp成功后,目录结构变为
gulp自动化打包(上)_第3张图片
之后所有的gulp插件都以此方式安装,即npm install xx --save-dev

gulp插件详细介绍

按照实际的打包顺序, 我依次会介绍gulp-git、gulp-htmlmin、gulp-uglify、gulp-concat、gulp-ng-annotate(如果不是angular框架不需要)、gulp-less、gulp-minify-css、minimist、del、gulp-zip、gulp-ftp、run-sequence

gulp-git

gulp-git主要的作用是通过gulp脚本,来执行一些git的操作,gulp-git插件基本上可以完成所有常用的git操作,比如add、commit、push等等,还可以查看git-log,十分方便,用法也非常简单,比如下面是一段获取git仓库中tag为v1.0.0的代码(也可以checkout分支名):

var git = require('gulp-git');
gulp.task('checkout', function () {
  git.checkout('v1.0.0', function (err) {
    if (err) throw err;
  });
})

详细的gulp-git使用方法,请参照https://github.com/stevelacy/gulp-git。

gulp-htmlmin

就是一个压缩html的插件,没什么特别要讲的,这边也直接拿网上的一个常用配置来演示。

var htmlmin = require('gulp-htmlmin');
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值  ==> 
        removeEmptyAttributes: true,//删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: true,//删除
                    
                    

你可能感兴趣的:(gulp)