gulp自动化构建工具的使用
gulp自动化构建工具:
把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!!
安装:
1.全局安装(全局安装一个gulp命令)
A.下载安装:
cnpm:cnpm i gulp -g
如果cnpm安装有问题:可使用yarn安装
yarn: yarn global add gulp
B.测试
gulp -v
2.本地安装(引入依赖模块,支持不同版本的项目运行)
A.安装
a.创建一个新文件夹,初始化package.json
cnpm: cnpm init -y
yarn: yarn init -y
b.安装本地gulp
cnpm: cnpm i gulp -D(安装开发依赖:全称:--save-dev)
yarn: yarn add gulp -D
c.配置:
- 创建一个gulpfile.js文件,与package.json同目录
- 引入gulp核心模块
var gulp =require('gulp');
- 配置gulp任务 :语法:gulp.task(name[, deps], fn)
参数:
name 任务名称
deps 可选,包含任务列表的数组
fn 回调函数,任务执行的代码var gulp = require('gulp'); gulp.task('default', function() {
console.log("测试");
});
- 执行任务
- gulp 任务名称 或者 gulp 任务名称是default就可以省略
gulp myTask(任务名)
- gulp 任务名称 或者 gulp 任务名称是default就可以省略
- 执行任务
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
下一篇将介绍gulp常用插件的使用
gulp自动化构建工具的使用的更多相关文章
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- Gulp(自动化构建工具 )
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1. 压缩js 2. 压缩css 3. 压缩less 4. 压缩图片 等等… 我们完全可以利用Gulp ...
- gulp自动化构建工具安装使用(1)
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...
- gulp自动化构建工具使用总结
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- Gulp自动化构建工具的简单使用
相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...
- gulp自动化构建工具使用
gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin") ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- gulp前端自动化构建工具使用
(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
随机推荐
- 隐藏input光标和输入内容方法
text-indent: -999em; // 隐藏input文字margin-left: -100%;// 隐藏input光标
- CSS盒子模型 box-sizing 用法
盒子模型 box-sizing 属性 语法:box-sizing :content-box || border-box || inherit 属性值: content-box 为(w3c标准盒子模型 ...
- numpy(五)
排序: x=np.array([2,5,6,2,3,5]) np.sort(x) 不改变原数组 x.sort() 改变原数组 i=np.argsort(x) 返回排序好的索引值 x[i] 使用花哨索 ...
- VUE项目注意点
1.vue组件中img标签的src属性绑定数据: <img :src="img" alt="图片" /> //scriptdata() { img: ...
- C#进度条简单应用
进度条表示文件复制的进度: 1.将进度条最大值设置为需要复制的文件总数 2.遍历文件时每复制一个文件之后,进度条+1 ;//文件总数 progressBar1.Value = progressBar1 ...
- Mysql笔试题(二)
(1)表名:购物信息购物人 商品名称 数量A 甲 2B 乙 4C 丙 ...
- stm32高级定时器的应用——spwm
用过stm32定时器的朋友都知道,定时器的CCR寄存器,可以用来配置PWM的输出,但同样也可以用来配置spwm.废话不多说,直接上代码. 首先,你得考虑一下几个因素: 1.同步调制还是异步调制. 2 ...
- #WEB安全基础 : HTTP协议 | 0x13 不安全的HTTP
HTTP作为一个大规模使用的网络协议就真的安全了吗? 我们知道互联网为什么叫互联网,你可以在任何地方都可以与之相连,所以在这些可以连接的点上都可以获取互联网的部分信息. 那么HTTP通信时有什么缺点吗 ...
- 1、写在开头的话——Tinking in Java 绪论之我见
新兵道歉!版式不懂,技术若有错误,请指正,或发我邮箱1300431700@qq.com 不胜感激! 本文力图通过文章总结的形式,阐述自己的观点,迫使自己思考书中精髓,即使跟技术无关! 正文开始! “上 ...
- js某一元素在数组中的索引
第一种:数组遍历 function search(arr,dst){ var i = arr.length; while(i-=1){ if (arr[i] == dst){ return i; } ...