我的学习代码https://github.com/klren0312/gulp_begin 如果觉得npm很慢可以使用cnpm。 Gulp是一个在你开发web时，帮助你完成几个任务的工具。...npm install命令，使用Node Package Manager（npm）来安装Gulp。 -g标志代表这个安装时全局安装到你的电脑上，这就运行你在电脑的任何地方都能使用gulp。...gulp.src告诉Gulp任务，所要使用的文件。gulp.dest`告知当任务完成后，Gulp输出文件的地址。 让我们来尝试构造一个真实的任务，将Sass文件编译成CSS文件。...我们首先要安装Browser Sync： $ npm install browser-sync --save-dev 你或许会注意到，当我们安装Browser Sync时，没有gulp-前缀。...开发者面对一个问题是，当自动化运行这个进程时，很难将你的脚本串联成正确的顺序。
最近读了 Why I Left Gulp and Grunt for npm Scripts。读完后，觉的这文章写的相当不错，就决定尝试下。 下面先简单介绍下 npm Scripts。...下命令行中删除文件夹的命令。...在你全局安装了 rimraf（npm -g i rimraf）后，配置 "scripts": { "remove": "rm -rf 文件夹路径" } 执行 npm run remove 就能做到在不同平台都能删除文件夹...-d src"// 启动静态服务器 } 开发时只需执行 npm run start 其中 Compass 需要先安装。...} 发布时只需执行 npm run build Happy Coding~ ps: 最近刚拿到 «程序员健康指南» ，就有点扁桃体发炎，是要我赶快看那书的节奏么~ 大家也要注意身体那。
当然也可以用它来删除插件 rimraf删除gulp的模块插件 1、安装：npm install -g rimraf（全局安装），如果安装了cnpm，也可使用cnpm install -g rimraf ...命令 2、使用：先定位目标文件夹的父级目录，然后命令行输入rimraf ***（***为需要删除的文件夹名称） ?...比如我的项目放在了D盘的test文件夹中，那我的本地目录就是：D:\test 二、安装流程： 1．Node环境安装 2．Npm- 3．...PS：未能出现版本号，请尝试注销电脑重试； npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器， 最后出现版本号就是装上了。 ? ...3．cnpm 为什么要安装cnpm？据说npm的服务器在国外，如果我们在国内从npm上下载文件会反应慢，而且可能会异常报错。。装上这个东东就快了。。。
expired 它是在我们执行 npm i 或 npm run xxx 指令时发生的。...我们将这个链接拷贝一下，直接放在浏览器里访问，它也是不可访问的。（在问题爆发时） 这是由于淘宝仓库源网站的证书过期所致。 自2017年2月27日，npm不再支持自签名证书或过期证书。...当我们使用 npm i 安装某些类库时，例如类库地址为 https://registry.npm.taobao.org/ylru/download/ylru-1.2.1.tgz，此时npm无法验证来源，.../ 这个更改的副作用是，更新或安装类库时需要梯子，如果有梯子则无妨。...为什么不向前兼容呢？ 不清楚，一向如此。 社区有一些规则的改变，属于基础改变，会对上面的一系列软件建筑产生致命影响。
当示例项目创建完成后，会自动在项目中引用 bootstrap 和 jquery，所以，我们就在这个项目的基础上，尝试采用 npm 来管理我们的前端组件包。 ...而当项目中存在了 package-lock.json 文件之后，因为项目中引用的组件包版本和来源信息已经锁定在了这个文件中了，此时，当别人拷贝了代码，准备还原时，就可以准确的加载到你开发时使用的组件版本...指定版本：比如此例中 bootstrap 的版本为 4.3.1，当重新安装时只安装指定的 4.3.1 版本。 ...save-dev //删除文件、文件夹 npm install rimraf --save-dev //监听文件变化 npm install gulp-changed --save-dev 安装完成后的...就像这里，我在项目打开时绑定了自动监听文件变化的任务，这时，只要我修改了 css、js 文件，gulp 就会自动帮我们实现对于文件的压缩。
前言 如果你已经在项目中引入了gulp，那么不妨尝试用一些gulp集成好的插件来做一些任务。下面假定前端项目中根目录有src以及dist两个，分别用于开发和生产。...gulp-less 模块地址：https://www.npmjs.com/package/gulp-less/ 安装 $ npm install gulp-less --save-dev 使用场景...}) gulp-clean-css 模块地址：https://www.npmjs.com/package/gulp-clean-css/ 安装 $ npm install gulp-clean-css...：删除指定路径的文件，删除管道中的文件（需要vinylPaths模块的安装），如果是整 个文件夹内容清空/*.如果是包括文件夹删除，直接文件目录即可，如/**/* 使用 var del=require...因为页面文件中的都是相对目录，所以当css以及js使用为产出地址时，要求页面等必备的希望产品的也放到产出目录。
npm (node package manager) ： node的第三方模块管理工具 下载：npm install 模块名称 卸载：npm uninstall package 模块名称 全局安装与本地安装...公共文件抽离 修改文件浏览器自动刷新 7 Gulp使用 使用npm install gulp下载gulp库文件 在项目根目录下建立gulpfile.js文件 重构项目的文件夹结构...使用npm init -y命令生成。 ? 使用 npm install 可以自动生成删除了的node-modules文件 ?...，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作 1.5.Node.js中模块加载机制 1 模块查找规则-当模块拥有路径但没有后缀时 require...main选项中的入口文件 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到 2 模块查找规则-当模块没有路径且没有后缀时 require('find'); Node.js
npm 安装插件 为 node 插件名-g 为全局安装，全局安装可以通过命令行在任何地方调用该插件，而非全局安装只会安装在当前定位目录的 node_modules 文件夹下，通过 require... [-g] [--save-dev] 命令，而不要直接删除本地插件包，借助 rimraf 可以删除所有的插件包，通过命令 npm install rimraf -g 安装 rimraf 之后...，同样的，安装完成之后，执行 cnpm -v 命令来查看是否成功安装，而 cnpm 跟 npm 的用法完全一样，只是在执行命令的时候，将 npm 换为 cnpm 即可gulp 安装执行命令 npm install...;我们看到通过 .run 方法进行任务关联时，提示该方法已被弃用，建议使用任务依赖或 gulp.watch 任务进行触发，该 API 起到了文件监听的作用，当 gulp.src 匹配的路径下的文件发生了更改...;快捷键 Command + c 即可终止当前操作，Windows 下为 Ctrl + C该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Gulp_Demo 上了，有需要的同学可自行下载
但是这也给我带来了一个问题，那就是发布时需要把安装的Bower包或NPM包都要打包上传到服务器。 如果现在发布ASP.NET Core Web App，wwwroot下已包含到项目中的文件都会被发布。...剔除ASP.NET Core Web中未引用的Bower包文件，把没有引用到的文件删除不就得了？！ 但是你随便打开一个Bower包文件夹，你就不想这么做了，一个一个删要删到什么时候。...而且如果直接去删除Bower包中无用的文件，可能会影响bower包的管理，比如bower包的升级降级。 不卖关子了，思路如下： 新建一个文件夹，将引用的文件复制到另外的目录。...全局安装 gulp： $ npm install --global gulp 作为项目的开发依赖（devDependencies）安装： $ npm install --save-dev gulp...运行后，需要复制的Bower包文件和文件夹就会复制到wwwroot\lib文件夹下。如图： ? 将bower包安装文件夹排除到项目外。 更新项目中现有文件的引用到lib目录下。
安装nodejs 没有的node的话，从这下载 Node.js，若已经有了可跳过这一步。 最好能保证你的node与npm/cnpm处于最新的状态，以免安装某些最新版本的gulp插件时因此报错。...注：本文中的所有npm均可换为cnpm。 全局安装gulp npm install gulp -g 命令提示符执行gulp -v，出现版本号即为正确安装，该方法可用于检测是否安装成功。...”标志将选定的插件添加到package.json devDependencies中，以便下次安装所有内容时，可以直接使用方便的“npm install”。...为了进一步改进此过程自动化实现，您可以尝试添加一些其他Gulp插件。...要深入了解这个JavaScript自动化实现，我建议添加 gulp-notify ，当任务运行时通知你。此外，您可以创建一个单独的任务来最小化生成的CSS代码，并使“scss”任务作为依赖关系运行。
实战 一、初始化项目 首先，我们建一个空文件夹，名字可以叫gulp-vue-cli，这就是项目根文件夹。相信聪明的小伙伴可以看出，我们今天的主角是gulp。...npm init -y 二、创建前端项目与后端项目 下一步，我们会在创建好的项目根文件夹内创建一个前端项目文件夹，名字可以叫src。另外，后端项目文件夹名字叫server。...在找它之前，我也找到其他可以实现自动刷新浏览器的插件，如：LiveReload，它也可以自动刷新页面，实时预览html效果。但是，我为什么没用LiveReload呢？...npm install -g browser-sync 也可以在本地项目下安装它。...： npm install gulp -D npm install browser-sync -D npm install gulp-nodemon -D 安装完依赖之后，我们就来解读下以上代码。
npm i gulp-sass 你只需要输入一行命令即可一次性批量安装模块 npm i gulp-pug gulp-debug gulp-sass 更快捷的是，如果安装的所有模块的前缀是相同的，则可以这样安装...更简化，你可以使用-P标志，这样安装： npm i gulp -P 同理，开发环境下的依赖安装，你可以用-D代替--save-dev npm i gulp -D 当你不带任何安装标志时，npm 默认将模块作为依赖项目添加到...文件夹及package.json中对应的包。...当然，你也可以用rm,un或者r来达到相同的效果: npm rm vue 如果由于某些原因，你只想从node_modules文件夹中删除安装包，但是想在package.json中保留其依赖项，那么你可以使用.../dist 以上就是一些我最爱的日常工作中用到的命令，如有更多，欢迎来告诉我～
为什么要使用Gulp 在前端开发中通常需要做，预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作，而使用Gulp可以自动化的完成这些工作，从而提高网站的开发效率，在我的博客使用Less...中介绍了将Less文件编译成CSS文件的方法，仔细观察可以看到如果按照博客中介绍的方法，在编译多个Less文件或者编译不同文件夹下的Less文件时需要执行多次Less文件编译命令，而使用Gulp可以一次性完成这些操作...全局安装Gulp npm install --global gulp 2....Gulp的情况下进行的，没有安装Gulp可以看前面的Gulp的安装与使用中的内容 1.创建一个src文件夹，并且在src文件夹下创建一个index.html文件 在Git Bash中执行下面的命令创建一个...CSS 下面的操作都是在项目中安装了Gulp的情况下进行的，没有安装Gulp可以看前面的Gulp的安装与使用中的内容 1.安装gulp-less插件 npm install gulp-less --save-dev
方法二： npm install -g nrm nrm use taobao nrm ls 安装依赖 当不加任何参数时执行 npm install，这两个包都会被安装到 node_modules...当执行 npm install --only=prod，只会安装 dependencies 中的包。...当执行 npm install --only=dev，只会安装 devDependencies 中的包。...注意事项：当我们把当前这个包发布出去以后，别人通过 npm install npm-demo 安装它时，只会安装它的 dependencies，而会忽略 devDependencies。...，一些情况下却不能，让我们尝试去看看这是为什么。
… gulp 的安装 是一个 JavaScript 相关的工具 就可以直接使用 npm 进行安装 需要安装再你的电脑环境里面, 一次安装多次使用 打开命令行, 输入指令=> $ sudo npm install...gulp@4 => 安装成功检测版本号, gulp cli 2.3.0 gulp 全局工具安装完毕 能给你的电脑提供一个启动 gulp 的环境 私人: 可以再 cmd 里面运行 gulp xxx 的指令...+ 同级目录下, 再次新建一个叫做 pages 的文件夹 => 不行 ? 不能创建同名文件夹 + 同级目录下, 创建一个叫做 views 的文件 => 不行 ?...全局依赖环境 gulp + 一台电脑安装一次, 以后使用就可以了 + 再命令行提供 gulp xxx 的能力 + 指令 $ npm install --global gulp.../src/pages/*.html', htmlHandler) -> 当指定目录下的 html 文件发生变化, 就会执行 htmlHandler 这个任务 5. gulp.series()
gulp 是一个流行的 JavaScript 流的构建工具，可以帮助我们自动化这个过程， 相比webpack， 我个人觉得gulp是一个较为轻量的打包工具了。...本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...然后，可以使用以下命令在全局围内安装 gulp：npm install -g gulp创建项目目录在本地磁盘上创建一个新的文件夹，例如 my-project，然后在其中创建以下文件：my-project...运行以下命令安装 Gulp 及其所需的依赖：npm install --save-dev gulp gulp-cssmin gulp-uglify browser-sync编写 Gulp 文件const...打包静态文件当您想要生成静态文件时，可以运行以下命令：gulp dist该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。
安装 Hexo 所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。...这里有个小坑：Hexo 官网上的安装命令是npm install -g hexo-cli，安装时不要忘记前面加上sudo，否则会因为权限问题报错。...初始化 使用终端cd到一个您指定的目录，执行以下命令(命令中的blog是您将要建立的文件夹的名称)： hexo init blog 使用终端cd到blog文件夹下，执行以下命令，安装npm： npm...Hexo 本地 这里我踩了个不算坑的坑，终端输入hexo s后没有成功，我也在网上搜到了很多解决办法，但是都没有奏效，后来我尝试改了下端口就成功了，也就是说默认的4000端口无法连接。...glup 使用方法 Hexo 依赖 gulp 插件安装，在站点的根目录下执行以下命令： npm install gulp -g npm install gulp-minify-css gulp-uglify
选择第一个 nvm-noinstall.zip ，然后解压在系统盘（一般开发相关的文件我都放C盘，但是放别的盘也是可以的）。我放的目录路径是C:\dev\nvm。...即使用这个版本号的node了。在use后，上面所说的nodejs文件夹就自动生成了。 二、npm的安装 首先 npm是什么？...npm的全局安装路径，然后在用户文件夹下会生成一个.npmrc的文件，用记事本打开后可以看到如下内容： prefix=C:\Develop\nvm\npm cache=C:\Develop\nvm\npm-cache...2、首先确保你已经正确安装了NODE环境，然后以全局方式安装gulp npm install -g gulp 全局安装完gulp后，还需要在每个要使用gulp的项目中单独安装一次，把目录切换到你的项目文件夹中...文件 gulp-minify-html 最小化图像：gulp-imagemin 5、运行gulp 说明：命令提示符执行gulp 任务名称； 编译less：命令提示符执行gulp testLess； 当执行
我本人在实际运用场景中，也经常使用 yarn 在安装或删除依赖文件，使用 npm 运行项目中定义的如：启动命令，打包命令等，所以二者完全可以同时使用。 二.Yarn的安装和命令 1....安装Yarn yarn 有很多种安装方式，对于不同的系统，我们可以区别安装，但在这里我推荐大家使用 Npm 去安装，这种方法最方便简洁。...我们可以试想一下，我们编写一个gulp的插件，而gulp却有多个主版本，我们只想兼容最新的版本，此时就可以用同等依赖（peerDependencies）来指定。...用于安装项目的所有依赖项 yarn licenses 列出已安装依赖的许可证及源码url yarn link 链接依赖文件夹 yarn list 列出已安装的依赖 yarn login 存储您在 registry...why 显示有关为什么安装依赖的信息 yarn workspace Yarn的工作区信息 yarn workspaces Yarn的所有工作区信息 5. npm 和 yarn混合使用 在平时的开发中
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
