技术标签: 项目实战
前端我们使用gulp
来自动化开发流程.配置好gulp
后,可以自动给我们处理好一些工作.比如写完css
后,要压缩成.min.css
,写完js
后,要做混淆和压缩,图片压缩等.这些工作都可以让gulp
帮我们完成.
使用npm init
命令在本地生成一个package.json
文件,package.json
是用来记录你当前这个项目依赖了哪些包,以后别人拿到你这个项目后,不需要你的node_modules
文件夹(因为node_modules中的包实在是太庞大了
).只需要执行npm install
命令,就会自动安装package.json
下devDependencies
中制定的依赖包.
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
是专门用来记录生产环境下的依赖包的!
要使用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
即可执行.
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
:将处理完后的文件,放到指定的目录下.不要放在和原文件相同的目录,以免产生冲突,也不方便管理.
像以上任务,压缩完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
.
处理js
文件,我们需要使用到gulp-uglify
插件,安装命令如下:
npm install gulp-uglify --save-dev
安装完后,我们就可以对js
文件进行处理了.示例代码如下:
var gulp = require("gulp");
var rename = require(
文章浏览阅读220次。在 create-react-app 中使用create-react-app 是业界最优秀的 React 应用开发工具之一,本文会尝试在 create-react-app 创建的工程中使用 antd 组件,并自定义 webpack 的配置以满足各类工程化需求。安装和初始化 引入 antd 高级配置 eject 源码和其他脚手架安装和初始化#我们需要在命令行中安装 create..._ant app如何用
文章浏览阅读47次。题目链接:http://poj.org/problem?id=2251Dungeon MasterTime Limit:1000MSMemory Limit:65536KTotal Submissions:37296Accepted:14266...
文章浏览阅读3.9k次。在这里插入代码片_python3 time 当前时间
文章浏览阅读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_把字符串下标从小到大交换成从大到小
文章浏览阅读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个元素。第二行为数组中
文章浏览阅读124次。文章目录1. 定义参考:大话设计模式1. 定义策略模式(strategy),定义算法家族,分别封装,让算法之家可以互相替换,算法的变化不会影响到使用算法的客户。在这里插入图片描述_11策略
文章浏览阅读143次。湖南文理学院课程设计报告湖南文理学院课程设计报告课程名称: 计算机软件技术基础课程名称: 计算机软件技术基础学 院: 电气与信息工程学院学 院: 电气与信息工程学院专业班级: 通信 08101专业班级: 通信 081..._湖南文理学院曹玲玲
文章浏览阅读7.3k次。Bitmap是Android系统中的图像处理的最重要的类之一。用它可以获取图像文件信息,对图像进行旋转,剪切,放大,缩小等操作。Bitmap代表一张位图,使我们在开发中常用的资源,下面就对Bitmap进行简单的介绍。Bitmap的获取方法:1、使用BitmapDrawableBitmapDrawable里封装的图片就是一个Bitmap对象,我们要把Bitmap包装成Bitm_使用bitmapfactory可以创建位图,其中无法被直接解析为位图的资源是()。a. 存放在d
文章浏览阅读1.5w次,点赞3次,收藏7次。ASP.NET中的gridview如何增加一行呢,下面介绍一种最简单的方式。只使用后台的数据,在后台的datatable或者list增加一项,然后重新绑定gridview。直接看代码效果:实体类public class PersonModel { private int personIndex; public int PersonIndex_asp.net的gridview增加一行
文章浏览阅读8.1k次。个人开发者发布开发应用想接入广告SDK,个人jie'c_ubity 接有米广告
文章浏览阅读462次。_modal-dialog-centered