gulp的使用
gulp的基础了解
Gulp是一个工具。用于项目构建。
Gulp简介:
多个开发者共同开发一个项目,每位开发者负责不同的模块,这就会造成一个完整的项目实际上是由许多的“代码版段”组成的;
使用less、sass等一些预处理程序,降低CSS的维护成本,最终需要将这些预处理程序进行解析;
合并css、javascript,压缩html、css、javascript、images可以加速网页打开速度,提升性能;
这一系列的任务完全靠手动完成几乎是不可能的,借助构建工具可以轻松实现。
所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。
常见的构建工具包括:Grunt、Gulp、F.I.S(百度出品)、webpack
Gulp是基于Nodejs开发的一个构建工具,借助gulp插件可以实现不同的构建任务,以其简洁的配置和卓越的性能成为目前主流的构建工具。
全局安装 npm install -g gulp
安装:
1.先要全局安装
$ npm install -g gulp --registry=https://registry.npm.taobao.org
2.再本地安装。
切换到项目目录。(先执行 npm init)
$ npm install gulp --registry=https://registry.npm.taobao.org
安装完成会生成一个node_modules文件夹。
gulpfile.js文件的配置
Gulpfile.js是什么文件:
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
而gulpfile.js就是帮助gulp实现自动化管理项目功能的核心文件.
步骤1: 在命令行中安装gulp插件(前提是安装了gulp: npm install gulp -g)
可以同时下载多个插件:
cnpm install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin open --save-dev
说明1: 因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以建议使用cnpm。
说明2: 项目依赖分两种,
--save:一个就是普通的项目依赖比如bootstrap,还用一种只是开发阶段需要用的,
--save-dev这种属于开发依赖比如gulp,开发依赖最终记录在devDependencies节点里面
说明3: 一些常用的gulp插件:
1. gulp-less: 把less文件转成css文件
2.gulp-clean-css:css文件压缩。
3.gulp-uglify:js压缩
4.gulp-concat:js合并
5.gulp-rename:重命名,给js压缩文件添加.min后缀
6.gulp-jshint:js语法检查
步骤2: 在项目文件夹下面创建一个名叫gulpfile.js的文件夹,在上面的插件下载完毕后,就可以配置相关代码的管理功能了:
步骤3: 开始打开gulpfile.js文件写代码配置(以gulp-less插件为例子):
var gulp = require('gulp'),//载入gulp模块 less = require('gulp-less');//载入需要用到的插件 //定义一个testLess任务(自定义任务名称) gulp.task('testLess', function () { gulp.src('less/*.less') //该任务针对的文件 .pipe(less()) //该任务调用的模块 .pipe(gulp.dest('css')); //将会在css下生成index.css }); //监听less文件 gulp.task('gulpWatch',function(){ gulp.watch('less/*.less',['testLess']); }); //同时让默认程序执行一次,可以提高开始执行速度。 gulp.task('default',['testLess','gulpWatch']);
最后在你的当前项目命令行中输入gulp执行即可。你会看到在相关的路径下生成对应的css文件。
但是,一般我们在公司,都不需要自己去配置这样一个文件,因为每次开发项目的时候都可以使用公司已经配置好的gulpfile.js文件,
把下面的代码拷贝到自己创建的gulpfile.js文件中即可使用:
var app = { // 定义目录 srcPath:'src/', buildPath:'build/', distPath:'dist/' } /*1.引入gulp与gulp插件 使用时,要去下载这些插件*/ var gulp = require('gulp'); var less = require('gulp-less'); var cssmin = require('gulp-cssmin'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); var connect = require('gulp-connect'); var imagemin = require('gulp-imagemin'); var open = require('open'); /*把bower下载的前端框架放到我们项目当中*/ gulp.task('lib',function () { gulp.src('bower_components/**/*.js') .pipe(gulp.dest(app.buildPath+'lib')) .pipe(gulp.dest(app.distPath+'lib')) .pipe(connect.reload()) //当内容发生改变时, 重新加载。 }); /*2.定义任务 把所有html文件移动另一个位置*/ gulp.task('html',function () { /*要操作哪些文件 确定源文件地址*/ gulp.src(app.srcPath+'**/*.html') /*src下所有目录下的所有.html文件*/ .pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目标位置 .pipe(gulp.dest(app.distPath)) .pipe(connect.reload()) //当内容发生改变时, 重新加载。 }); /*3.执行任务 通过命令行。gulp 任务名称*/ /*定义编译less任务 下载对应的插件 gulp-less * 把less文件转成css放到build * */ gulp.task('less',function () { gulp.src(app.srcPath+'style/index.less') .pipe(less()) .pipe(gulp.dest(app.buildPath+'css/')) /*经过压缩,放到dist目录当中*/ .pipe(cssmin()) .pipe(gulp.dest(app.distPath+'css/')) .pipe(connect.reload()) }); /*合并js*/ gulp.task('js',function () { gulp.src(app.srcPath+'js/**/*.js') .pipe(concat('index.js')) .pipe(gulp.dest(app.buildPath+'js/')) .pipe(uglify()) .pipe(gulp.dest(app.distPath+'js')) .pipe(connect.reload()) }); /*压缩图片*/ gulp.task('image',function () { gulp.src(app.srcPath+'images/**/*') .pipe(gulp.dest(app.buildPath+'images')) .pipe(imagemin()) .pipe(gulp.dest(app.distPath+'images')) .pipe(connect.reload()) }); /*同时执行多个任务 [其它任务的名称] * 当前bulid时,会自动把数组当中的所有任务给执行了。 * */ gulp.task('build',['less','html','js','image','lib']); /*定义server任务 * 搭建一个服务器。设置运行的构建目录 * */ gulp.task('server',['build'],function () { /*设置服务器*/ connect.server({ root:[app.buildPath],//要运行哪个目录 livereload:true, //是否热更新。 port:9999 //端口号 }) /*监听哪些任务*/ gulp.watch('bower_components/**/*',['lib']); gulp.watch(app.srcPath+'**/*.html',['html']); gulp.watch(app.srcPath+'js/**/*.js',['js']); gulp.watch(app.srcPath+'images/**/*',['image']); gulp.watch(app.srcPath+'style/**/*.less',['less']); //通过浏览器把指定的地址 (http://localhost:9999)打开。 open('http://localhost:9999'); }); /*定义默认任务 * 直接执行gulp 会调用的任务 * */ gulp.task('default',['server']);
把gulp运用到项目实战中
在了解了上面的gulp(一)(二)以后,我们就可以开始在项目中具体使用了,具体使用流程如下:
1. 创建一个project文件夹,然后里面首先创建一个src文件夹,里面放置开发要用到的文件夹:
2. 在project下打开git命令窗口(也可以windows自带的命令行):
3. 输入命令:
npm install -g gulp --registry=https://registry.npm.taobao.org
实现全局安装gulp;( 只需要执行一次,如果已经执行过了,就不需要再去执行。Gulp -v 有版本号,代表已经执行过了)
在项目中输入命令: npm init –f 实现切换到项目目录,此时会生成package.json文件
然后输入命令: npm install gulp --registry=https://registry.npm.taobao.org
生成node_modules文件夹,这个文件夹是项目依赖包
(以上的操作都是基于安装了node,配置好了nvm和npm环境的基础下的):
截图代码如下:
生成的文件夹如下所示:
4. 在项目目录下创建一个叫gulpfile.js文件: 这个文件是用于自动化管理项目的(即gulp任务管理清单),里面自己可以写一些图片压缩,代码丑化,less自动编译的功能. 这里我们直接拿别人编写好的使用即可(在第二篇的时候可以直接把代码拷贝下来):
5. 拿出封装好的less文件(比如字体rem转换文件,一般做webApp开发的时候公司都会提供的两个公共less文件),然后在index.less下用@import的方式导入进去:
6. 使用bower下载angular(前提是你得安装了bower,安装的命令是 npm install -g bower,也可以检查你是否安装了bower: bower -v)
u输入命令安装angular: bower install angular anglar-ui-router
7. 安装好了以后,就执行命令gulp,会生成如下文件,并且会自动打开浏览器实现无刷新自动更新内容: (这个步骤其实可以放在前面执行,只是一开始src没有创建文件体现不出效果)
其中,由于gulpfile.js的自动构建功能,
build文件夹是浏览器执行的文件,里面包含了less编译好的css文件等,所有index.html中导入的外部文件的路径,都是要参考build文件下的,而不是src文件下的. 经过gulpfile.js文件的自动化管理,所有的导入的外部less文件,最后都会变成一个index文件.
dist文件夹是发布文件,
src文件是开发的文件夹,经过gulp命令执行后,都会把文件整合到build文件夹下.所有的代码都是写在src下的,运行的文件都是build文件夹下的
下图是经过gulp命令执行后的buid文件:
8. 参照build下面的文件夹,在src文件夹中的index.html文件导入相关css,js等外部文件:
因为浏览器上运行的是build文件夹
9. 然后可以在src中的js文件夹,css文件夹中任意再创建文件夹,并在新创建的文件中添加文件,因为反正最后经过gulp自动化管理以后,都会自动变成一个index文件:
10. 另外,可以在编译器中直接使用命令行,有时候页面或者build文件夹没有刷新的时候,可以输入命令: gulp;
如果使用webstorm开发,里面有自带的命令行;
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码