Gulp在前端开发中的简单应用

    TOOLS     gulp

前言

近几年,前端构建工具,自动化开发工具层出不穷,原来需要手工搭建的东西,一点点的全都被自动化工具代替,前端开发越来越倾向于只关注业务层面的东西,而不需要去做更多繁琐的工作了。

发展历程其实可以简单归纳为: 自动化工具 Grunt -> Gulp -> Webpack,在依赖加载方面,前有AMD标准的RequireJs,国内CMD标准的 SeaJs,然而,随着ES6规范的到来,这些依赖加载模块也终将被渐渐埋葬,取而代之的是babel等遵循ES6语法的新生事物。

在一些中小型的项目中,使用基于内容流的Gulp 还是可以大大提高开发效率的,配合git的自动部署将会成为中小型项目敏捷开发的利器。本文主要介绍Gulp在前端开发中的几个简单应用,适合入门学习和练习。

Gulp搭建过程

前情提要及说明

本例以windows开发环境下为例,项目目录为Thinkphp3.1搭建。
本例中的项目目录结构如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Webroot
-App
-Lib
-Conf
-Lang
-Tpl
-Public
+Js
+Css
-Src
+Js
+Css
-Common
-Conf
-Lib
-...

我们需要将Src下的Js 和 Css文件进行自动部署并发布到Pulic目录下。

要实现的功能

实现的主要功能如下:

  • 对项目中的sass文件进行自动转换为css并压缩为最小化并复制到发布目录
  • 复制没有使用sass的css文件到发布目录
  • 对项目中的js文件进行自动转换并压缩为最小化并复制到发布目录

Gulp环境搭建

安装node

首先Gulp的运行依赖nodejs,因此需要先安装nodejs, 点此下载nodejs安装包,选择自己操作系统对应的版本下载即可。下载完成后一路下一步完成安装。

初始化npm配置文件

nodejs安装完成后会自动带有npm模块,此时便可以在命令行下使用npm进行安装各种依赖的插件了,在此之前我们要先初始化一个npm配置文件。

  • 打开项目对应的目录,在项目根目录,按住Shift,点击鼠标右键,在此处打开命令窗口。
  • 我们需要先初始化一个npm的项目依赖配置文件,用来保存该项目依赖的插件名称和版本,方便更换机器或者多人之间协作开发可以快速部署gulp的依赖环境。

    1
    npm init
  • 根据要求输入名称等一些基本信息(其中名称和版本为必填,其他项目可以直接回车确认)

  • 初始化完成之后,在根目录即可看到自动生成了一个 package.json的文件,该文件即为保存项目的插件依赖的配置文件。
    -

    安装gulp

    1
    npm install -g gulp --save-dev

-g代表全局安装,-save-dev 代表将本次安装的插件信息保存到 package.json 中的devDependencies中,方便后续的使用。

安装需要的插件

1
2
3
npm install gulp-uglify --save-dev
npm install ulp-minify-css --save-dev
npm install gulp-sass --save-dev

全部安装完成后即可进入下一步了。但是在我们大天朝,经常会出现有些时候安装失败的情况。其实也早有解决方案,就是使用淘宝的npm镜像

使用taobao的npm镜像来安装

具体方法就是先安装一个插件

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

安装完成后,即可使用cnpm命令代替npm命令来进行安装了,这样就会从淘宝的服务器进行安装,速度嗖嗖的。

好了,安装完需要的插件,即可进行配置了。

Gulp 配置

上面一大堆内容都是如何把gulp搭建起来,如何配置才能生成需要的功能呢。网上有很多gulp的教程,这里根据代码一行一行的注释看即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//引入需要的js包,也就是我们上面安装的依赖插件,并复制给变量
var gulp = require('gulp'),
ugjs = require('gulp-uglify'),
minicss = require('gulp-minify-css'),
sass = require('gulp-sass');

// 制作一个gulp命令sassfile用来将对应目录下的scss文件转换为css并压缩为最小化的css
// 最后复制到目标目录中,在根目录新建文件,命名为gulpfile.js 并输入以下代码保存
gulp.task('sassfile',function() {
gulp.src('A/Tpl/Src/Css/*.scss')
.pipe(sass())
.pipe(minicss())
.pipe(gulp.dest('A/Tpl/Public/css'));
});

//压缩css文件并复制到目标目录中
gulp.task('minicss',function() {
gulp.src('A/Tpl/Src/Css/*.css')
.pipe(minicss())
.pipe(gulp.dest('A/Tpl/Public/css'));
});

//压缩js文件并复制到目标目录中
gulp.task('ugjs',function() {
gulp.src('A/Tpl/Src/js/*.js')
.pipe(ugjs())
.pipe(gulp.dest('A/Tpl/Public/js'));
});

//设置build命令,组合执行以上三条命令
gulp.task('build',['ugjs','sassfile','minicss']);

//设置kw命令,用来让gulp监听对应文件的变动,一旦发现变动立即执行对应任务
gulp.task('kw', function(){
gulp.watch('A/Tpl/Src/Css/*.scss',['sassfile']);
gulp.watch('A/Tpl/Src/Css/*.css',['minicss']);
gulp.watch('A/Tpl/Src/Js/*.js',['ugjs']);
})

经过以上的编写后,在命令行输入

1
gulp build

即可自动执行sass编译并压缩,输出、css压缩输出、js压缩输出命令
如果不想每次修改后都要运行一下这个命令,那就启动监听

1
gulp kw

这样,每次当你对所有被监听的文件作出修改,并执行保存动作都时候就会触发对应的编译指令,是不是很酷。

页阅读量:  ・  站访问量:  ・  站访客数: