gulp的使用
时间:2022-07-23
本文章向大家介绍gulp的使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
引言
gulp是用于前端自动化构建的,方便前端进行即时开发的工具
自动化构建所需的插件
在项目路径下使用 npm init初始化之后,将下面需要安装的依赖复制到package.json文件中
"devDependencies": {
"browser-sync": "^2.24.4",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-cache": "^1.0.2",
"gulp-concat": "^2.6.1",
"gulp-concat-folders": "^1.3.1",
"gulp-connect": "^5.5.0",
"gulp-cssnano": "^2.1.3",
"gulp-imagemin": "^4.1.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.0",
"path": "^0.12.7"
}
如图:
在复制到package.json文件中后,使用npm install命令,npm会下载devDependencies中对应版本号的依赖文件,这里只是完成了本地的安装,此时如果运行 gulp命令可能会报一些错误, 大概率是因为没有安装对应全局的插件,或者本地安装的插件和全局安装的版本号不一致
- 如果没有安装对应全局和本地的插件,则使用命令安装(以版本号2.24.4的browser-sync为例)
npm install browser-sync@2.24.4 -g
本地安装
npm install browser-sync@2.24.4 --save-dev
- 如果安装了全局插件报错,可能因为本地和全局插件的版本号不一致,卸载重装插件试试
npm uninstall browser-sync npm install browser-sync@2.24.4 -g npm install browser-sync@2.24.4 --save-dev
gulp监听任务
依赖包引用
var gulp=require('gulp');
var cssnano=require('gulp-cssnano');
var rename=require('gulp-rename');
var uglify=require('gulp-uglify');
var concat=require('gulp-concat');
var cache=require('gulp-cache');
var imagemin=require('gulp-imagemin');
var bs=require('browser-sync').create();
var sass=require('gulp-sass');
监听任务
工程目录如图:
var paths=
{
"html":"./templates/**/",
"css":'./src/css/',
"js":'./src/js/*.js',
"images":'./src/images/',
"css_dist":'./dist/css/',
"js_dist":'./dist/js/',
"images_dist":'./dist/images/'
};
//监听处理html任务
gulp.task('html',function(){
gulp.src(paths.html+"*.html")
.pipe(bs.stream());
});
//监听处理css的任务
gulp.task('css',function(){
gulp.src(paths.css+"*.scss")
.pipe(sass().on('error',sass.logError))
.pipe(cssnano())
.pipe(rename({'suffix':'.min'}))
.pipe(gulp.dest(paths.css_dist))
.pipe(bs.stream());
});
//监听处理js的文件任务
gulp.task('js',function(){
gulp.src(paths.js+"*.js")
.pipe(uglify())
.pipe(gulp.dest(paths.images_dist))
.pipe(bs.stream());
});
//监听处理图片文件的任务
gulp.task('images',function(){
gulp.src(paths.images,"*.*")
.pipe(cache(imagemin()))
.pipe(gulp.dest(paths.images_dist))
.pipe(bs.stream());
});
//舰艇文件修改任务
gulp.task('watch',function(){
gulp.watch(paths.html+"*.html",['html']);
gulp.watch(paths.css+"*.scss",['css']);
gulp.watch(paths.js+"*.js",['js']);
gulp.watch(paths.images+"*.*",['images']);
});
//初始化browser-sync的任务
gulp.task('bs',function(){
bs.init({
'server':
{
'baseDir':"./"
}
});
});
//创建一个默认的任务
gulp.task('default',['bs','watch']);
使用gulp命令开启default默认任务之后,此时更改src下任何一个文件内容,就会看到网页内容的更新
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- yii2.0框架场景的简单使用示例
- Laravel5.6框架使用CKEditor5相关配置详解
- 怎么在Linux中自定义bash命令提示符
- Hbase入门详解
- php使用curl模拟多线程实现批处理功能示例
- php实现的简单多进程服务器类完整示例
- Linux磁盘挂载、分区、扩容操作的实现办法
- PHP商品秒杀问题解决方案实例详解【mysql与redis】
- PHP设计模式之组合模式定义与应用示例
- php使用socket调用http和smtp协议实例小结
- Ubuntu删除多余内核的办法
- php 使用mpdf实现指定字段配置字体样式的方法
- 虚拟机中CentOS7设置固定IP地址的方法
- CentOs下手动升级node版本的办法
- php设计模式之抽象工厂模式分析【星际争霸游戏案例】