node+bower+gulp+webpack初见

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

node

node模块管理是通过NPM(即 Node Package Manage,是 NodeJS 模块管理工具)来处理各模块之间的依赖。NPM按树状结构来管理的,支持某模块的不同版本。

[前提是本机已安装node、git环境],配置好某项目的npm配置文件package.json后,在当前项目目录下用命令npm install 或npm install --save-dev安装即可,自动将package.json中的模块安装到node-modules文件夹下。

*使用npm安装一些包缓慢或安装失败,建议使用淘宝镜像。

镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):
1.通过config命令
npm config set registry https://registry.npm.taobao.org 
npm info underscore (如果上面配置正确这个命令会有字符串response)
2.命令行指定
npm --registry https://registry.npm.taobao.org info underscore 
3.编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

搜索镜像: https://npm.taobao.org
建立或使用镜像,参考: https://github.com/cnpm/cnpmjs.org

bower

bower是使用nodejs开发,用于web包管理。web包通常认为由html+css+javascript构成。如果越来越多得开源项目都托管在github上,bower只需要将github上项目加上一个配置文件既可以使用bower方式使用安装包。作为包管理,bower能提供添加新web包,更新web包,删除web包,发布web包功能,管理包依赖。

bower是通过npm安装和管理的:npm install -g bower 

配置好某项目的bower配置文件bower.json后,在当前项目目录下用命令bower install安装即可,自动将bower.json中的模块安装到bower-components文件夹下。

node.js

node.js 是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎。目的是为了提供撰写可扩展网络程序,如Web服务。

npm vs bower

npm是用来下载安装node js的第三方工具包,也可以用来发布你自己开发的工具包。

bower是一个web包管理的工具,管理一些js库,比如说jquery,bootstrap等。通过bower,你就不用自己去找jQuery文件了,通过配置文件就可以自动完成了。

gulp

gulp:处理html压缩/预处理/条件编译,图片压缩,精灵图自动合并等任务

gulpfile.js:gulp的配置文件,引入了所有的gulp子任务。参见gulp 入门

webpack

webpack是模块化管理的工具,使用webpack可实现模块按需加载,构建js/css任务,模块预处理,模块打包等功能。可学习webpack入门指南。

 

整合gulp & webpack

webpack是众多gulp子任务中比较复杂的部分,主要对JS/CSS进行相关处理。
包括:模块分析、按需加载、JS代码压缩合并、抽离公共模块、SourceMap、PostCSS、CSS代码压缩等等...

转载于:https://my.oschina.net/guoshuyun/blog/726716

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/542789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hbuilder php mysql_xampp本地服务器+HBuilder配置php环境

HBuilder配置PHP环境:下载,运行HBuilder编辑器打开右侧小窗口,点击设置图标—>设置web服务器—>外置web服务器输入你想要浏览器运行的URL,点击两个确定,再重新点击设置web服务器,选择PHP类文件(选择之…

百度地图手机和电脑不一致_你可能不知道的电脑手机冷知识

各位好久不见呀,自科部科科又回来了!平时我们经常使用电脑,你可能以为你对电脑和手机了如指掌,然而下面的冷知识你知道多少个?01一台电脑可以有多个桌面如果你熟练的使用多个桌面这个技巧那么就可以躲着家长领导偷懒了…

RHEL 7 中 systemctl 的用法(替代service 和 chkconfig)

2019独角兽企业重金招聘Python工程师标准>>> 1、systemctl是RHEL 7 的服务管理工具中主要的工具,它融合之前service和chkconfig的功能于一体。可以使用它永久性或只在当前会话中启用/禁用服务。 systemctl可以列出正在运行的服务状态,如图&am…

js 刷新div_vue.js备忘记录(五) vue-router

如果我们采用SPA(单网页应用)的设计方式,服务器会把前端文件一次性发过来,前端通过监听url的改变,选择展示那些内容,也就是前端路由一. 如何改变url但是页面不刷新?方式一: 改变哈希值hash比如,我们随便找一个网页我们在浏览器控制台输入发现网站的url有了些改变查看network却…

css div撑满窗口高度_如何使用CSS将div的高度设置为窗口的100%?

css div撑满窗口高度Introduction: 介绍: Hello there developers! Well, certainly if you are reading this article then that means that you have run into some trouble while creating your web page or website and if you are a beginner in this field, …

.net core image怎么保存_轻量级Vue图片上传插件——Vue-core-image-Upload

介绍vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩。它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。Githubhttps://github.com/Vanthin…

mysql确认半同步命令_怎么判断mysql是否是半同步复制

AFTER_COMMIT(5.6默认值)master将每个事务写入binlog ,传递到slave 刷新到磁盘(relay log),同时主库提交事务。master等待slave 反馈收到relay log,只有收到ACK后master才将commit OK结果反馈给客户端。AFTER_SYNC(5.7默认值,但5.6中无此模式…

《Linus Torvalds自传》摘录

转自:http://www.ruanyifeng.com/blog/2012/09/linus_torvalds.html作者: 阮一峰日期: 2012年9月 3日除了程序员,大概很少人知道Linux操作系统。它的发明者Linus Torvalds,知道的人就更少了。他本人也很低调&#xff0…

python绘制条形图例题_python matplotlib库绘制条形图练习题

练习一:假设你获取到了2017年内地电影票房前20的电影(列表a)和电影票房数据(列表b),那么如何更加直观的展示该数据? a ["战狼2","速度与激情8","功夫瑜伽",&quo…

mac mysql 忘记密码 卸载_MySQL忘记密码后重置密码(Mac )

转:http://www.cnblogs.com/lihuanqing/p/5623872.html安装好MySQL以后,系统给了个默认的的密码,然后不小心关了,惨了密码没有了。1、关闭mysql服务器 sudo /usr/local/mysql/support-files/mysql.server stop 也可以在系统偏好里…

Nginx严格访问代理HTTP资源

为什么80%的码农都做不了架构师?>>> 1 严格访问 访问能基于客户端的IP地址允许或拒绝或使用基于HTTP验证。 为了允许或拒绝从某个地址及或所有地址的访问,使用allow和deny指令: location / { deny 192.168.1.2; allow 192.168…

csv 字符串_Python实现json转csv格式

利用Python实现json格式转换为csv文件格式前言本文是学校的课程设计,这里我没有用封装好的json库来实现,而是把读进来的文件当一个字符串来处理,核心函数其实是python的eval()类型转换函数。什么是 JSON?我们要考虑到json格式下key-value对的…

mysql 线性表_数据结构之线性表

概要参考《大话数据结构》,把常用的基本数据结构梳理一下。线性表定义线性表(List):零个或多个数据元素的有限序列。若将线性表记为 \((a_1, \cdots, a_{i-1}, a_i, a_{i1}, \cdots, a_n)\),则表中 \(a_{i-1}\) 领先于 \(a_i\),\(…

sqldeveloper mysql迁移_通过SQL Developer工具将MySQL数据库内容迁移至Oracle的步骤

通过SQL Developer工具将MySQL数据库内容迁移至Oracle的步骤发布时间:2020-06-08 15:52:18来源:51CTO阅读:210作者:三月本篇文章给大家主要讲的是关于通过SQL Developer工具将MySQL数据库内容迁移至Oracle的步骤的内容&#xff0c…

未能成功加载扩展程序_【JAVA虚拟机(JVM)精髓】09-几种不同的类加载器

持续更新JVM相关知识,敬请关注:Java虚拟机精髓专栏​zhuanlan.zhihu.com上一节说了下类加载器和类加载过程。这一节我们看下几种不同的类加载器。JVM支持的类加载器有两类,分别是引导类加载器和自定义加载器。这里的自定义自定义加载器&#…

图片md5修改工具_如何修改视频和图片的MD5,用电脑自带的命令

首先说下,md5到底是啥,它是一段固定长度的数据。无论原始数据是多长或多短,其MD5值都是128bit。另外md5是确定性,一个原始数据的MD5值是唯一的,同一个原始数据不可能会计算出多个不同的MD5值;类似人类的身份…

c语言遍历文件内容_C语言学习第28篇---动态内存分配剖析

为什么C语言要动态分配内存的意义?1.C语言中的一切操作都是基于内存的2.变量和数组都是内存的别名---内存分配由编译器在编译期间决定的---定义数组的时候必须指定数组长度---数组长度是在编译期就必须确定的需求:程序运行的过程中,可能需要使…

重启mysql的命令 linux_linux重启mysql命令

如何启动/停止/重启MySQL一、 启动方式1、使用 service 启动:service mysqld start2、使用 mysqld 脚本启动:/etc/inint.d/mysqld start3、使用 safe_mysqld 启动:safe_mysqld&二、停止1、使用 service 启动:service mysqld s…

javascript原型_使用JavaScript的示例报告卡Web应用程序原型

javascript原型Hi! At times, beginners always find it hard getting the application of the theory they learn In programming or a particular language. 嗨! 有时,初学者总是很​​难在编程或特定语言中应用他们学到的理论。 In this article, we…

vb.net cad 块表最后的实体_21个绘图命令+7个技巧,3分钟让你成为CAD高手

绘制图纸需要用到CAD,CAD制图在生活中也是广泛运用,那么学习CAD到底难不难呢?在这里要告诉CAD新手们,世上无难事,可以用3分钟让你成为CAD高手。21个绘图命令A:绘圆弧B:定义块C:画圆D…