gulp自动化开发_gulp开发-程序员宅基地

技术标签: 项目实战  

前端项目搭建

前端我们使用gulp来自动化开发流程.配置好gulp后,可以自动给我们处理好一些工作.比如写完css后,要压缩成.min.css,写完js后,要做混淆和压缩,图片压缩等.这些工作都可以让gulp帮我们完成.

安装gulp

1.创建本地包管理环境:

使用npm init命令在本地生成一个package.json文件,package.json是用来记录你当前这个项目依赖了哪些包,以后别人拿到你这个项目后,不需要你的node_modules文件夹(因为node_modules中的包实在是太庞大了).只需要执行npm install命令,就会自动安装package.jsondevDependencies中制定的依赖包.

2.安装gulp

gulp的安装非常简单,只要使用npm命令安装即可.但是因为gulp需要作为命令行的方式运行,因此需要安装在系统级别的目录中.
这个项目用的到gulp版本是3.9.1,因此安装的时候最好指定一下版本。

    npm install  -g [email protected]

因为在本地需要使用require的方式gulp.因此也需要在本地安装一份:

    npm install --save-dev [email protected]

以上的--save-dev是将安装的包添加到package.json下的devDependencies依赖中.以后通过npm install即可自动安装.
devDependencies这个是用来记录开发环境下使用的包,如果想要记录生产环境下使用的包,那么在安装包的时候使用npm install xx --save-dev就会记录到package.json下的devDependencies中,devDependencies是专门用来记录生产环境下的依赖包的!

3.创建gulp任务

要使用gulp来流程化我们的开发工作.首先需要在项目的根目录下创建一个gulpfile.js文件.然后在gulpfile.js中填入以下代码:

// 导入node_modules包下的gulp
var gulp = require("gulp");

// task(任务的名字,匿名函数)
gulp.task("greet",function(){
   
    
    console.log("hello world");
});

这里对代码进行一一解释:
1.通过require语句引用已经安装的第三方依赖包.这个require只能是引用当前项目的,不能引用全局下.require语法是node.js独有的,只能在node.js环境下使用.
2.gulp.task是用来创建一个任务.gulp.task的第一个参数是命令的名字,第二个参数是一个函数,就是执行这个命令的时候会做什么事情,都是写在这个里面的.
3.写完以上代码后,以后如果想要执行greet命令,那么只需要进入到项目所在的路径,然后终端使用gulp greet即可执行.

4.创建处理css文件压缩的任务:

gulp只是提供一个框架给我们.如果我们想要实现一些更加复杂的功能.比如css压缩,那么我们还需要安装以下gulp-cssnano插件.gulp相关的插件安装也是通过npm命令安装,安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包).
css文件的处理,需要做的事情就是压缩,然后再将压缩后的文件放到制定的目录下(不要和原来的css文件重合了)! 这里我们使用gulp-cssnano来处理这个工作:

    npm install gulp-cssnano --save-dev

然后在gulpfile.js中写入以下代码:

var gulp = require("gulp");
var cssnano = require("cssnano");

// 定义一个处理css文件改动的任务
gulp.task("css",function(){
   
    
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(gulp.dest("./css/dist/"));
});

以上代码进行详细解释:
1.gulp.task:创建一个css处理的任务.
2.gulp.src:找到当前css目录下的所有以.css结尾的css文件.
3.pipe:管道方法.将上一个方法的返回结果传给另外一个处理器.比如以上的cssnano.
4.gulp.dest:将处理完后的文件,放到指定的目录下.不要放在和原文件相同的目录,以免产生冲突,也不方便管理.

5.修改压缩后的文件名

像以上任务,压缩完css文件后,最好是给他添加一个.min.css的后缀,这样一眼就能知道这个是经过压缩后的文件.这时候我们就需要使用gulp-rename来修改了.当然首先也需要安装npm install gulp-rename --save-dev 示例代码如下:

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");

gulp.task("css",function(){
   
    
    gulp.src("./css/*.css")
    .pipe(cssnano())
    // suffix 后缀名  prefix 前缀名 rename({'suffix':'.min','prefix':'my.'})
    .pipe(rename({
   
    "suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
});

在上述代码中,我们增加了一行.pipe(rename({"suffix":".min"})),这个我们就是使用rename方法,并且传递一个对象参数,指定修改名字的规则为添加一个.min后缀名.这个gulp-rename还有其他的指定文件名的方式,比如可以在文件名前加个前缀等.更多的教程可以看这里:https://www.npmjs.com/package/gulp-rename.

6.创建处理js文件的任务

处理js文件,我们需要使用到gulp-uglify插件,安装命令如下:
npm install gulp-uglify --save-dev

安装完后,我们就可以对js文件进行处理了.示例代码如下:

var gulp = require("gulp");
var rename = require(
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43677746/article/details/99243563

智能推荐

Ant官方教程(四)------------------------------------在 create-react-app 中使用_ant app如何用-程序员宅基地

文章浏览阅读220次。在 create-react-app 中使用create-react-app 是业界最优秀的 React 应用开发工具之一,本文会尝试在 create-react-app 创建的工程中使用 antd 组件,并自定义 webpack 的配置以满足各类工程化需求。安装和初始化 引入 antd 高级配置 eject 源码和其他脚手架安装和初始化#我们需要在命令行中安装 create..._ant app如何用

POJ2251 Dungeon Master —— BFS-程序员宅基地

文章浏览阅读47次。题目链接:http://poj.org/problem?id=2251Dungeon MasterTime Limit:1000MSMemory Limit:65536KTotal Submissions:37296Accepted:14266...

用python3获取当前系统时间:年月日时分秒。2021-01-25_python3 time 当前时间-程序员宅基地

文章浏览阅读3.9k次。在这里插入代码片_python3 time 当前时间

linux下访问web目录外文件的问题,nginx的web目录下处理中文文件和文件夹以及编码格式问题...-程序员宅基地

文章浏览阅读191次。有时候网站的根目录下有中文文件名或者文件夹时,在客户端进行访问这些相关文件时就会 出现显示的问题。下面尝试了一些方法解决,可用。[root@testandqa0101 ~]# echo $LANGen_US.UTF-8[root@testandqa0101 ~]# cat /etc/sysconfig/i18nLANG="en_US.UTF-8"SYSFONT="latarcyrheb-sun1..._linux nginx 中文文件及路径处理

字符串大小写互换(函数)_把字符串下标从小到大交换成从大到小-程序员宅基地

文章浏览阅读837次。#include#includechar a(char b){ int i; if(b>='a'&&b { b-=32; } else if(b>='A'&&b { b+=32; } return b;}int main(){ int l,n_把字符串下标从小到大交换成从大到小

数据结构与算法-8数组的分割_多组数据,每组数据两行。第一行为一个整数n,代表数组中有n个元素。第二行为数组中-程序员宅基地

文章浏览阅读4.9k次,点赞15次,收藏42次。Description已知由n(n≥2)个正整数构成的集合A={ak}(0≤k<n),将其划分为两个不相交的子集A1和A2,元素个数分别是n1和n2,A1和A2中元素之和分别为S1和S2。设计一个尽可能高效的划分算法,满足|n1-n2|最小且|S1-S2|最大。Input多组数据,每组数据两行。第一行为一个整数n,代表数组中有n个元素。第二行为数组中的n个元素(元素之间用空格分隔)。当..._多组数据,每组数据两行。第一行为一个整数n,代表数组中有n个元素。第二行为数组中

随便推点

11-策略模式-行为模式_11策略-程序员宅基地

文章浏览阅读124次。文章目录1. 定义参考:大话设计模式1. 定义策略模式(strategy),定义算法家族,分别封装,让算法之家可以互相替换,算法的变化不会影响到使用算法的客户。在这里插入图片描述_11策略

c语言游戏课程设计模板,贪吃蛇游戏课程设计(C语言).模版.pdf-程序员宅基地

文章浏览阅读143次。湖南文理学院课程设计报告湖南文理学院课程设计报告课程名称: 计算机软件技术基础课程名称: 计算机软件技术基础学 院: 电气与信息工程学院学 院: 电气与信息工程学院专业班级: 通信 08101专业班级: 通信 081..._湖南文理学院曹玲玲

Android学习之——图形图像处理(Bitmap、BitmapFactory)(一)_使用bitmapfactory可以创建位图,其中无法被直接解析为位图的资源是()。a. 存放在d-程序员宅基地

文章浏览阅读7.3k次。Bitmap是Android系统中的图像处理的最重要的类之一。用它可以获取图像文件信息,对图像进行旋转,剪切,放大,缩小等操作。Bitmap代表一张位图,使我们在开发中常用的资源,下面就对Bitmap进行简单的介绍。Bitmap的获取方法:1、使用BitmapDrawableBitmapDrawable里封装的图片就是一个Bitmap对象,我们要把Bitmap包装成Bitm_使用bitmapfactory可以创建位图,其中无法被直接解析为位图的资源是()。a. 存放在d

ASP.NET—002:GridView手动增加一行_asp.net的gridview增加一行-程序员宅基地

文章浏览阅读1.5w次,点赞3次,收藏7次。ASP.NET中的gridview如何增加一行呢,下面介绍一种最简单的方式。只使用后台的数据,在后台的datatable或者list增加一项,然后重新绑定gridview。直接看代码效果:实体类public class PersonModel { private int personIndex; public int PersonIndex_asp.net的gridview增加一行

unity3d接入有米广告SDK----android_ubity 接有米广告-程序员宅基地

文章浏览阅读8.1k次。个人开发者发布开发应用想接入广告SDK,个人jie'c_ubity 接有米广告