安装gulp教程(整理)(代码片段)

默诺 默诺     2022-11-18     192

关键词:

1.gulp需要用到npm和nodejs

所以先安装这两个,由于最新版本的nodejs已经包含npm。所以安装nodejs即可。

①nodejs国内安装地址

http://nodejs.cn/download/

安装后运行-cmd,检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果:

我们可以看到环境变量中已经包含了C:\\Program Files\\nodejs\\

检查Node.js版本

②使用$ npm install --global gulp

 

npm没有成功配置,去查看环境变量,

指到3所指的路径,你会看到下图只有一个etc文件,没有马赛克部分内容,没有npm文件。

 

发现问题后,我们在环境变量中添加我们安装的npm命令行执行文件路径

我的是安装在D:\\Program Files\\nodejs下(如下图)

则添加此路径的环境变量,按下图步骤

如果系统跟这个不一样,就在path的变量下在原有的路径下追加新的路径,用“;”分隔

npm配置完毕

③ 使用npm的国内镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org

等待一会儿安装成功

④ 安装gulp

   1. 全局安装 gulp:

$ npm install --global gulp

  2. 作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require(\'gulp\');

gulp.task(\'default\', function() 
  // 将你的默认的任务代码放在这
);

4. 运行 gulp:

$ gulp

 

 

 

参考:

          https://blog.csdn.net/qq_29712995/article/details/79094433

 

gulp教程之静态资源压缩(代码片段)

1创建项目安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件,项目目录如下:2压缩插件简介gulp-useref合并html里面的js/cssgulp-concat用于合并文件,把也就是多个文件合并到一个文件中,以节省存储空间gulp.spritesmith图... 查看详情

gulp教程之自动添加版本号(代码片段)

1创建项目安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件,项目目录如下:2自动更改版本号插件简介gulp-rev为css文件中引入的图片或字体等添加hash编码gulp-asset-rev为js/css文件生成hash编码并生成rev-manifest.json文件... 查看详情

node.js使用教程-3.gulp-file-include详细教程(代码片段)

...用。环境准备gulp-file-include是gulp的插件,所以需要先安装gulpnpminstall-ggulpnpminstallgulp--save-devnpminstallgulp-file-include-- 查看详情

node.js使用教程-2.gulp打包构建入门与使用(代码片段)

...译压缩。环境准备gulp是基于node运行的,使用npm全局安装npminstall-ggulp安装gulp依赖包, 查看详情

gulp缓存markdown编辑(代码片段)

gulp添加版本号解决缓存问题第一项配置node[node安装教程:]https://www.cnblogs.com/xinaixia/p/8279015.html运行node-v有版本号即为安装成功第二项配置cnpm运行cmd,安装淘宝镜像npminstallcnpm-g--registry=https://registry.npm.taobao.org第三项项目源目录配置... 查看详情

node.js使用教程-1.使用gulp-file-include插件,实现html复用(代码片段)

...译工具进行一次替换,之后页面html页面就是完整的。安装gulp-file-include先安装gulp以及gulp-file-include先全局安装gulpnpmin 查看详情

text安装gulp(代码片段)

查看详情

javascriptnpm\gulp安装(代码片段)

查看详情

gulp整理

 gulp基于node 1、全局安装gulp:$npminstall--globalgulp2、前往项目目录,然后安装作为项目的开发依赖(devDependencies):$npminstall--save-devgulp3.在项目根目录下创建一个名为gulpfile.js的文件:1vargulp=require(‘gulp‘);23gulp.task(‘default... 查看详情

从终端运行gulp命令(代码片段)

...行Gulp,但似乎无法在终端中获得命令。我已成功运行并安装了Gulp,但无法获得该过程的下一部分(本教程仅提供Windows的说明)。我知道我必须执行一个“运行”命令,但我一直都弄错了。简而言之,“运行”或“执行”文件命... 查看详情

gulp的常见用法(代码片段)

Gulp用法Gulp的安装部署首先安装gulp全局安装gulp命令行工具npmi-ggulp-cli全局安装npmi-ggulp在项目的根目录创建一个gulpfile.js的文件Gulp中的方法gulp.src():获取任务要处理的文件gulp.dest():输出文件gulp.task():建立gulp任务参数一:任务... 查看详情

gulp简单安装和入门(适用刚接触gulp的同学)(代码片段)

...化、浏览器自动刷新、部署文件生成、转换等操作。二、安装流程  1、安装nodejs(gulp是基于nodejs),直接打开nodejs官网,直接下载一个nodejs,打开根据提示正常安装即可。  查看详情

gulp打包(代码片段)

...ww.gulpjs.com.cn/gulp的优势注意:当前学习的是gulp3.9.1版本,安装时请指定版本,默认安装的为最新的版本4.0,两版本有差别。建立项目文件夹gulp入门指南:https://www.gulpjs.com.cn/docs/getting-started/开发环境,src文件夹生产环境,build文... 查看详情

gulp入门(代码片段)

...,在这里我就以自己使用的压缩js文件为例子进行介绍1.安装nmpNPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,所有可以直接安装nodejs,就能一起安装好npm了。下面附上下载地址:nodejs官网安装好,打开w... 查看详情

gulp教程gulp-less安装

gulp教程之gulp-lessgulp详细入门教程11.1、安装nodejs;11.2、新建package.json文件;cnpminit11.3、全局和本地安装gulp;cnpminstallgulp-g、cnpminstallgulp--save-dev11.4、安装gulp插件;cnpminstallgulp-less--save-dev11.5、新建gulpfile.js文件;11.6、 查看详情

gulp和yarn的二分钟包会教程(代码片段)

 1.什么是gulp?基于node的自动化构建工具 扩展:开发的时候分为2个节点一个是开发阶段 另一个是部署阶段    开发阶段:源文件不会被压缩      部署阶段:所有文件需要压缩2.gulp... 查看详情

gulp入门(代码片段)

...,在这里我就以自己使用的压缩js文件为例子进行介绍1.安装nmpNPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,所有可以直接安装nodejs,就能一起安装好np 查看详情

前端小白的gulp入门(代码片段)

gulp新手入门全局安装cnpminstall-ggulp本地安装cnpminstallgulp-D如果项目没有package.json,记得npminit安装插件cnpminstallgulp-插件名-D插件官方文档细心的科普//i?-->install//D?-->--save-dev记录package.json文件里//S?-->--save本地安装gulp报低级错... 查看详情