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介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
随机推荐
- LeetCode 122 Best Time to Buy and Sell Stock II 解题报告
题目要求 Say you have an array for which the ith element is the price of a given stock on day i. Design ...
- CF451E Devu and Flowers 数论
正解:容斥+Lucas定理+组合数学 解题报告: 传送门! 先mk个我不会的母函数的做法,,, 首先这个题的母函数是不难想到的,,,就$\left ( 1+x_{1}^{1}+x_{1}^{2}+. ...
- awk 实战
awk 一些好玩的用法.有什么不错的点子可以留言,发挥出awk牛逼功能 分离mac地址 ifconfig wlan0 | grep eth | awk '{n=split($2,arr,": ...
- [ROS]激光驱动安装
参考资料: https://blog.csdn.net/hongliang2009/article/details/73302986 https://blog.csdn.net/bohaijun_12 ...
- 二、多功能提示框——MBProgressHUD
概述 (注:图片仅展示部分功能,图片来自github) MBProgressHUD是一个Objective-C开源库,它可以让你在UI界面界面上插入一个透明的方框,伴以文字或进图条等,从而提示一些后台 ...
- JavaScript 区分中英文字符的两种方法: 正则和charCodeAt()方法
正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. 而判断中文字符, 简单且执行效率高. regExpForm.onb ...
- Cocos Creator JS web平台复制粘贴代码(亲测可用)
Cocos Creator JS web平台复制粘贴代码(亲测可用) 1 webCopyString: function(str){ var input = str; const el = docum ...
- zlib简单使用说明(转)
1.背景:项目需要把protobuf文件压缩后再传到MQTT,于是就想到了zlib 2.zlib是提供数据压缩用的函式库,此函式库为自由软件. 3.网上下载zlib压缩包,执行如下命令,函数库就可使用 ...
- mysql导入本地文件(作业)
1.准备本地文件(pet.txt) 2.在CMD中启动mysql服务,然后输入以下命令导入(pet.txt) load data local infile '路劲' into table pet; 3 ...
- PostMessage发送WM_CLOSE消息,实现关闭任意程序
#include <Windows.h> #include <tchar.h> int WINAPI _tWinMain(HINSTANCE hInstance, HINSTA ...