如何使用gulp服务和livereload一个NPM包 - 腾讯云开发者社区

文章/答案/技术大牛

发布

前端页面可视化开发-livestyle,livereload,browser-sync

npm install -g livereload 如果安装不成功，可以使用如下命令： sudo npm install -g livereload 在文件加下启动livereload...livereload ctrl+s保存后实时刷新结合gulp，实现刷新： npm init 这样，就创建了一个package.json的文件这个文件用于标识...node.js的包名，版本，依赖等信息编写gulp脚本： var gulp = require("gulp"); var livereload = require("gulp-livereload...(file); gulp.src(file.path).pipe(livereload()) }) }) 安装gulp npm install gulp -g npm install...gulp watch 3.browser-sync的使用命令,不用V**代理,各浏览器同步内容和交互：在文件目录下 browser-sync start --server --files

1.5K2 0

如何使用npm发布自己的npm包

创建在npm的官网上注册一个账号，https://www.npmjs.com/ 1：在本地通过npm init 初始化一个项目，并建一个index.js 文件，因为index.js为默认进入的文件，如下...： 2：在本地将该创建的项目打开，并在index.js编写想要写的文件(这里简单写一个排序)，如下： 3：接下来通过npm login来登录你之前创建的npm账号，如下： 4：npm pubish...使用 npm install 包名三. 版本更新更改版本号重新发布四. 删除某个版本 npm unpublish 包名@版本号

4.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

如何使用npm发布自己的npm包

创建在npm的官网上注册一个账号，https://www.npmjs.com/ 1：在本地通过npm init 初始化一个项目，并建一个index.js 文件，因为index.js为默认进入的文件，如下...： image-ab2ede5fb9d14ab8bb059eb63257c67c.png 2：在本地将该创建的项目打开，并在index.js编写想要写的文件(这里简单写一个排序)，如下： image...-1dc4644452b844869943897ce6cfd223.png 3：接下来通过npm login来登录你之前创建的npm账号，如下： image-4841e3bdae0d4096a9f8fd6c903c0720...使用 npm install 包名三....删除某个版本 npm unpublish 包名@版本号

2.2K2 0

Gulp探究折腾之路(I)

(outPut)); }); 在gulpfile.js同级目录运行gulp scripts即可；PS:当然前提是您已经安装了nodejs，并且使用npm安装了代码中需要的插件gulp和gulp-uglify...---- 注:即便使用npm link感觉也不是一个特别简洁的方案。并且在使用的时候还遇到了些许问题: 之前有提问于@segmentFaultgulp如何管理多项目？...LiveReload结合了浏览器扩展（包括Chrome extension），在发现文件被修改时会实时更新网页。它可以和gulp-watch插件或者前面描述的gulp-watch()函数一起使用。...静态网站如果您想要监听.css文件, 您需要使用服务器模式。...BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。

2.3K8 0

前端工程化篇之 Gulp

gulp 是一个构建工具，基于Node.js的平台运行，使用的是commonJs的模块化语法。...我们使用gulp需要用到的包一个TASK任务，对应一个包，对应一个处理逻辑、 gulp.series对应的是同步任务，从左到右，依次执行任务。...去https://gulpjs.com/plugins/搜相关的插件 gulp-xxx 2. 打开插件的npm仓库看文档使用 3. 下载并引入gulp插件 4....(); // 开启服务器 connect.server({ name: 'Dev App', root: ['build'], port: 3000, livereload...start gulp.task('start', gulp.series('build', 'watch')); 上面包括了基本上所有gulp工程化所需要的包的使用方法和注释，喜欢的朋友希望你收藏！

1.6K1 0

第210天：node、nvm、npm和gulp的安装和使用详解

同样的我们还可以安装cnpm工具，它是中国版的npm镜像库，地址在这里：https://cnpmjs.org/，也是npm官方的一个拷贝，因为我们和外界有一堵墙隔着，所以用这个国内的比较快，淘宝也弄了一个和...npm一样的镜像库，http://npm.taobao.org/，具体怎么使用可以去这个网站看使用介绍，它和官方的npm每隔10分钟同步一次。...npm常用操作 https://npmjs.com 安装一个包，npm install package_name 初始化操作，给项目添加一个配置文件，可以用npm init, 如果想使用默认的就用npm...通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。...*.css" 使用上面命令会开启一个迷你服务器，自动帮你打开浏览器，默认地址localhost:3000，默认打开index.html，如果没有，需要手动加上你要打开的页面，如localhost:3000

3.1K1 0

如何发布一个typescript npm包

以之前的base64.js https://my.oschina.net/lilugirl2005/blog/3058514 为参考内容，我们发布一个用typescrip编写的npm包创建typescript...项目初始化项目 mkdir base64 cd base64 npm init 安装相关依赖库 npm install --save-dev typescript 发布npm包在实际项目中安装和使用...npm包

1.3K6 0

前端自动化工具 -- Gulp 使用简介

而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。同样的，也是包括基本用法和各插件的使用。...package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了）然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样：...中直接配置devDependencies依赖项，然后再统一 npm install 或者一个一个地安装，依赖项会自动建立。...比如安装压缩css的依赖包： npm install gulp-minify-css --save-dev 这里直接把所以依赖全支持上，因为都要用到。...= require('gulp-cache'), livereload = require('gulp-livereload'), del = require('del'); 然后，新建一个任务

1.6K2 1

Gulp开发教程（翻译）

通过本文，我们将知道如何使用Gulp来改变开发流程，从而使开发更加快速高效。 What Is Gulp? Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。...首先，需要在全局安装Gulp包： npm install -g gulp 然后，在项目里面安装Gulp： npm install --save-dev gulp Using Gulp 现在我们创建一个Gulp...（查看大图） BrowserSync不需要使用浏览器插件，因为它本身就可以为你提供文件服务（如果文件是动态的，则为他们提供代理服务）和用来开启浏览器和服务器之间的socket的脚本服务。...Grunt在2013年非常流行，因为它彻底改变了许多人开发网站的方式，它有上千种插件可供用户使用，从linting、压缩、合并代码到使用Bower安装程序包,启动Express服务都能办到。...这些和Gulp的很不一样，Gulp只有执行单个小任务来处理文件的插件，因为任务都是JavaScript（和Grunt使用的大型对象不同），根本不需要插件，你只需用传统方法启动一个Express服务就可以了

1.3K4 0

从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？

Express 是一个保持最小规模的灵活的Node.js，Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。这里，我们主要使用它创建几个API接口，供前台调用。...在此之前，你需要安装以下两个依赖： npm install express npm install body-parser -D 三、开发前后端热重载功能前后端项目我们已经建立完成，下面我们将把重点放到如何开发热重载功能上...默认情况下,浏览器和编辑器并不会自动为你激活LiveReload的功能，你需要手动配置一些东西。所以这么麻烦，干脆看看还有没有别的解决方案。...可以单独使用，也可以集成到gulp和grunt这样的构建工具中使用，在Node.js项目中还能结合gulp-nodemon实现全栈的自动刷新。...gulp-nodemon nodemon是一款非常实用的工具，用来监控你 Node.js 源代码的任何变化和自动重启你的服务器。

9852 0

gulp的安装和使用

windows是命令提示符（window + r 输入cmd回车） 3、使用npm（nodejs的包管理器），或选装cnpm执行npm install cnpm -g --registry=https:...//registry.npm.taobao.org 4、全局安装gulp：(c)npm install gulp -g 5、新建package.json到项目根目录【非必选】（josn文件需删除注释，此用来记录项目信息和配置初始插件...gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload...gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload...18 cache = require('gulp-cache'),//压缩图片过滤（仅修改图片压缩） 19 livereload = require('gulp-livereload'

1.6K5 0

卸载npm和安装npm_使用`npm uninstall`卸载npm软件包「建议收藏」

卸载npm和安装npm To uninstall a package you have previously installed locally (using npm install in the node_modules folder, run 要卸载以前在本地 npm install (使用node_modules文件夹中的npm install...package.json文件的devDependencies中列出的开发依赖关系，则必须使用-D / --save-dev标志将其从文件中删除： npm uninstall -S <package-name...flag: 如果软件包是全局安装的，则需要添加-g / --global标志： npm uninstall -g for example: 例如： npm uninstall...翻译自: https://flaviocopes.com/npm-uninstall-packages/ 卸载npm和安装npm 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn

5.5K1 0

Gulp安装流程、使用方法及cmd常用命令导览

后来用到的gulp也好，gulp的插件包也好，都是要在npm这个里边弄出来的。可以理解为，一个硬盘，里边放的各种整理好的、适用于各种功能的且不重复的文件夹（插件），然后我们需要啥，就去里边摘下来。...据说npm的服务器在国外，如果我们在国内从npm上下载文件会反应慢，而且可能会异常报错。。装上这个东东就快了。。。...var sass = require(‘gulp-sass’);//导入工具包require（node-modules）里的对应模块，以后你需要什么插件就对应执行这一句，不过要把变量名和括号里的插件名字改掉...不是，要重建，但是丫丫姐的项目竟然都可以用，就是直接在建好的本地gulp项目中，再建一个项目包开始工作全局环境的全局啥意思？...八、gulp常用插件集锦 livereload插件，他需要安装一个 liveReload谷歌浏览器（chrome）插件2.1：http://www.cnplugins.com/devtool/livereload

2.9K6 0

gulp

简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp，使用npm首先得配置node环境 Install npm install gulp-cli -...'); }); 监听任务 gulp.task('watch', function () { gulp.watch('a/*',['hello']); }); 使用插件来扩展gulp的功能 Sass.../xiangmu/less')); }); 构建服务器 npm install gulp-connect --save-dev gulp.task('server', function () {...connect.server({ root:'dist' }); }); 浏览器实时刷新 npm install gulp gulp-livereload --save-dev 在server...服务中添加livereload:true（启动实时刷新的功能）在要实现刷新的文件中添加.pipe(connect.reload()) 合并文件 npm install gulp-concat --

1.3K1 0

如何自己写一个公用的NPM包

本文作者：IMWeb 钌子_rawbin 原文出处：IMWeb社区未经同意，禁止转载以markdown-clear,创建过程为例，讲解整个NPM包创建和发布流程 1 如何创建一个包 1.1...gitignore.io 文档，自己配命令行工具，以便随时可以玩我们这里生成了一个Node + IntellJ-all 的结果内容语法参考gitignore doc 1.5 初始化NPM包使用npm...-d lib", } 2.2.2 实现一个可以全局安装的npm包添加package.json的配置 "bin": { "markdown-clear": "....使用npm 安装本地文件作为本地包 npm install path/to/markdown-clear 使用npm 安装本地文件作为全局包 npm install path/to/markdown-clear...-g 2.4 文档输出写文档 docs 目录写代码相关的设计和使用文档，没有自然可以不用写这里的文档应该在README.md 中会有入口。

9752 0

Gulp基本使用

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。...1.基本使用 npm i gulp-cli -g npm i gulp -D cnpm i gulp gulp-uglify gulp-concat 2.创建文件gulpfile.js键入如下 const.../src/*.js']); const livereload = require('gulp-livereload'); //打包函数 let js = function js(done){...watch(){ livereload.listen(); gulp.watch('....* livereload * cnpm i -g http-server * cnpm i gulp-livereload -D * 安装插件 */

1.3K1 0

如何发布一个 TypeScript 编写的 npm 包

前言在这篇文章中，我们将使用TypeScript和Jest从头开始构建和发布一个NPM包。我们将初始化一个项目，设置TypeScript，用Jest编写测试，并将其发布到NPM。...我们将使用jest，因为它简单且好用。 npm i -D jest @types/jest ts-jest ts-jest包是Jest理解TypeScript所需要的。...另一个选择是使用babel，这将需要更多的配置和额外的模块。我们就保持简洁，采用ts-jest。使用如下命令初始化jest配置文件： ....嵌套结构可以是对象和数组，也可以是Map和Set。使用npm t运行测试，当然，不出意外会失败。...总结我们从头开始创建并发布了一个简单的npm包。我们的库提供了一个ESM模块，TypeScript的类型，使用jest覆盖测试用例。你可能会认为，这其实一点都不难，的确如此。

2.5K2 0

如何发布一个 TypeScript 编写的 npm 包

前言在这篇文章中，我们将使用TypeScript和Jest从头开始构建和发布一个NPM包。我们将初始化一个项目，设置TypeScript，用Jest编写测试，并将其发布到NPM。...我们将使用jest，因为它简单且好用。npm i -D jest @types/jest ts-jestts-jest包是Jest理解TypeScript所需要的。...另一个选择是使用babel，这将需要更多的配置和额外的模块。我们就保持简洁，采用ts-jest。使用如下命令初始化jest配置文件：....嵌套结构可以是对象和数组，也可以是Map和Set。使用npm t运行测试，当然，不出意外会失败。...总结我们从头开始创建并发布了一个简单的npm包。我们的库提供了一个ESM模块，TypeScript的类型，使用jest覆盖测试用例。你可能会认为，这其实一点都不难，的确如此。

2K2 0

如何自己写一个公用的NPM包

以markdown-clear,创建过程为例，讲解整个NPM包创建和发布流程 1 如何创建一个包 1.1 创建并使用一个工程在GitHub上新建一个仓库,其名markdown-clear clone...gitignore.io 文档，自己配命令行工具，以便随时可以玩我们这里生成了一个Node + IntellJ-all 的结果内容语法参考gitignore doc 1.5 初始化NPM包使用npm...-d lib", } 2.2.2 实现一个可以全局安装的npm包添加package.json的配置 "bin": { "markdown-clear": "....使用npm 安装本地文件作为本地包 npm install path/to/markdown-clear 使用npm 安装本地文件作为全局包 npm install path/to/markdown-clear...-g 2.4 文档输出写文档 docs 目录写代码相关的设计和使用文档，没有自然可以不用写这里的文档应该在README.md 中会有入口。

2.1K10 0

前端构建工具 Gulp.js 上手实例

接下来我们就一起来看看如何安装 Gulp, 并通过一个简单的案例让你感受一下这个新的构建工具。...首先，要安装依赖项： npm install --save-dev gulp gulp-util 接下来，安装我们需要使用到的 Gulp 插件，这些插件同样也都是 Node 模块，我们同样使用 npm...命令来安装它们： npm install --save-dev gulp-uglify gulp-concat 在上面的例子中，安装了两个插件 gulp-uglify 和 gulp-concat, 通过它们可以对...注意这里使用了 --save-dev 参数来安装 Gulp 依赖和插件，加上这个参数以后，在安装这些包的同时，也会把它们添加到我们的包配置文件 package.json: { "devDependencies..."^2.2.14" } } 这样可以确保项目所需的依赖包可以便捷地通过 npm 来进行安装。

2.5K7 0

点击加载更多

前端页面可视化开发-livestyle,livereload,browser-sync

如何使用npm发布自己的npm包

如何使用npm发布自己的npm包

Gulp探究折腾之路(I)

前端工程化篇之 Gulp

第210天：node、nvm、npm和gulp的安装和使用详解

如何发布一个typescript npm包

前端自动化工具 -- Gulp 使用简介

Gulp开发教程（翻译）

从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？

gulp的安装和使用

卸载npm和安装npm_使用`npm uninstall`卸载npm软件包「建议收藏」

Gulp安装流程、使用方法及cmd常用命令导览

gulp

如何自己写一个公用的NPM包

Gulp基本使用

如何发布一个 TypeScript 编写的 npm 包

如何发布一个 TypeScript 编写的 npm 包

如何自己写一个公用的NPM包

前端构建工具 Gulp.js 上手实例

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐