导航:首页 > 程序命令 > gulp不是内部命令

gulp不是内部命令

发布时间:2022-04-20 14:26:48

⑴ nodejs装gulp的时候这个样,为什么

1、安装nodejs
1.1、说明:gulp是基于nodejs,理所当然需要安装nodejs;
1.2、安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意)。
2、使用命令行(如果你熟悉命令行,可以直接跳到第3步)
2.1、说明:什么是命令行?命令行在OSX是终端(Terminal),在windows是命令提示符(Command Prompt);
2.2、注:之后操作都是在windows系统下;
2.3、简单介绍gulp在使用过程中常用命令,打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):
node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;
npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器,那它有什么用呢?稍后解释;
cd定位到目录,用法:cd + 路径 ;
dir列出文件列表;
cls清空命令提示符窗口内容。

⑵ gulp在项目中怎么使用

  1. 安装node.js-->http://www.runoob.com/nodejs/nodejs-install-setup.html

  2. 安装gulp

3.npm init --yes 命令生成package.json

4.安装需要的模块【例如:npm install gulp-less --save-dev】

5.新建gulpfile.js文件-->


6.【命令行】编译默认任务-->gulp

编译指定任务-->【gulp <name>】-->例如:gulp less

⑶ 全局方式安装gulp是什么意思

npm-ginstallgulp

如果是 linux 或者 Mac,你可能需要在前面加 sudo

sudonpminstall-ggulp

上面的命令中个,-g 代表全局安装,安装之后你可以直接在终端执行 gulp 命令。


npminstallgulp

如果不实用 -g 参数,gulp 会被装在当前目录下的 node_moles 目录中,不能直接通过 gulp 命令使用,需要你手动改环境变量。

⑷ gulp最新的gulp-uglify插件用了pump,这个怎么用,老是报错

这里并不讲什么 gulp 及其其插件的安装,此前的文章已经提到过了。这里主要用来记录一下,gulp构建工具的一些简单常用的用法。
最有用的Gulp插件汇总
1)假如我们想使用gulp压缩js文件并合并js文件,应如何操作呢看
使用gulp-uglify和gulp-concat插件,gulpfile.js 大致如下:
/**
* Created by DreamBoy on 2016/8/19.
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('concat', function() {
// 你的默认的任务代码放在这
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
});

gulp.task('default', ['concat']);

// 在命令行中运行 gulp
/*
默认的名为default的任务(task)将会被运行,在这里,这个任务并未做任何事情。
想要单独执行特定的任务(task),请输入gulp <task> <othertask>。
*/
更加详细的用法可以参考:gulp教程之gulp-uglify

⑸ 执行gulp命令时报错,怎么回事

mole.js:327
throw err;
^

Error: Cannot find mole 'gulp-jshint'
at Function.Mole._resolveFilename (mole.js:325:15)
at Function.Mole._load (mole.js:276:25)
at Mole.require (mole.js:353:17)
at require (internal/mole.js:12:17)
at Object.<anonymous> (C:\Users\Administrator\Desktop\gulp\gulpfile.js:5:14)

at Mole._compile (mole.js:409:26)
at Object.Mole._extensions..js (mole.js:416:10)
at Mole.load (mole.js:343:32)
at Function.Mole._load (mole.js:300:12)
at Mole.require (mole.js:353:17)
at require (internal/mole.js:12:17)

这是怎么回事呢??

⑹ 如何在linux下安装gulp

npm-ginstallgulp

如果是 Linux 或者 Mac,你可能需要在前面加 sudo
sudonpminstall-ggulp

上面的命令中个,-g 代表全局安装,安装之后你可以直接在终端执行 gulp 命令。


npminstallgulp

如果不实用 -g 参数,gulp 会被装在当前目录下的 node_moles 目录中,不能直接通过 gulp 命令使用,需要你手动改环境变量。

⑺ 如何结合Gulp使用PostCss

PostCSS 现在已经普及了一段时间,如果您还没有使用过它或不知道PostCSS是什么,那么我建议您看看这篇 PostCSS简介 ,该文章介绍了PostCSS的基础知识,包括如何安装和使用一些PostCSS插件。

在本教程中,我将向您展示如何结合Gulp使用PostCSS,一个流行的自动化工具。由于这篇文章不是一个关于Gulp的入门教程,所以我不会涵盖 Gulp 的基础知识。但为了快速入门,您可以看看这篇 Gulp.js简介 。

1.项目设置

在开始本教程之前,你应该创建一个项目文件夹用来工作。该文件夹内应该已经安装了Gulp以及两个内部文件夹,名称分别为“initial”和“final”(或您选择的其它名称)。所谓的“initial”的文件夹将存放你的原材料和未加工的CSS代码。 “initial”文件夹将存放处理过的文件,随时可以使用。

在继续之前,在您的项目文件夹中打开使用终端,运行以下命令:

npm install gulp-postcss --save-dev

PS:--save-dev补充:表示将正在安装的插件作为依赖添加到project.json文件里。这将对多人合作模式有很大的帮助。当其他开发人员运行 npm install 在软件包安装命令,所有的插件将被自动安装。

此时你的文件夹结构应该是:

initial —您的原始CSS文件的文件夹。

style.css —未处理的css样式,我们将在稍后进行编辑。

final — 处理过的css文件的文件夹

node_moles — 所有NPM模块的文件夹

gulp — 当你安装Gulp时创建的文件夹

gulp-postcss —运行上面的命令后创建的文件夹。

guplfile.js —你的 Gulp文件

package.json —你的 package.json 文件

2.安装插件

开始之前,我们先安装一些基本的插件。我们将要使用的插件是 short-color (一个颜色插件).这个插件基本上扩展了现有的颜色属性,并且可以设置第二个颜色值(将会被作为背景颜色)。运行以下命令来安装 short-color。

npm install postcss-short-color --save-dev

你还可以同时安装使用gulp-postcss和postcss-short-color :

npm install gulp-postcss postcss-short-color --save-dev

这两个插件安装完毕后,你需要打开并编辑gulpfile.js文件,这样就可以开始使用该插件工作。我们首先通过以下代码来启用这两个插件:
var gulp = require('gulp');

var postcss = require('gulp-postcss');

var shortColor = require('postcss-short-color');

现在,让我们建立一个gulp任务来处理我们的原始的CSS文件,并创建一个准备就绪的样式表。下面是代码这样做:
gulp.task('css', function () {
return gulp.src('initial/*.css')
.pipe(postcss([shortColor]))
.pipe(gulp.dest('final'));
});

我首先创建一个名为CSS的任务。当你要运行相应的功能时可以用到这个名字。您可以在gulp.src()内部指定要处理的文件。使用*的CSS将处理“intial”文件夹内所有的CSS文件。

接下来,我们使用pipe()函数来调用我们的所有插件。要做到这一点,我们需要将所有的插件作为参数传递给postcss()函数。在我们的基本的例子中,我们实际上只有一个插件需要传递。
在下一节,我会告诉你如何传递多个插件。插件通过管道后,gulp.dest()将被用于设置处理的文件的目的地。

为了测试,如果一切已正确设置,在“initial”文件夹内创建一个style.css文件。 style.css文件将有以下的CSS:
section {
color: white black;
}

接下来,你需要在你的终端里运行 gulp css 命令。此刻,在您的“final”文件夹内,你应该会看到一个style.css文件,像下面的CSS 一样:
section {
color: white;
background-color: black;
}

如果您CSS的样式和上面所展示的CSS样式一样的话,我们就可以认为一切工作正常。

3.安装多个插件

只使用一个基本的插件并不能从根本上减轻你的工作量。PostCSS有很多令人印象深刻的且令人难以置信的有用的插件,所以在大多数情况下,你需要使用到的插件不止一个。在本节中,我将告诉你如何在工作中同时使用多个插件。

您可能会发现有三个PostCSS插件(包)是非常有用的:即 short , cssnext 和 autoprefixer

short将使你少写并且速记大量的CSS属性。 例如:

.heading {
font-size: 1.25em 2;
}

将会被解析成:

.heading {
font-size: 1.25em;
line-height: 2;
}

cssnext能够在你的css样式表中,使用最新的CSS语法。例如,下面的CSS:

.link {
color: color(green alpha(-10%));
}

将被转换为:

.link {
background: rgba(0, 255, 0, 0.9);
}

最后,autoprefixer将会在您的CSS和转换后的样式文件中添加供应商前缀:

img {
filter: grayscale(0.9);
}

转换为:

img {
-webkit-filter: grayscale(0.9);
filter: grayscale(0.9);
}

现在让我们看看如何安装这些插件,然后用它们来改造我们的样式表。在项目目录下运行下面的命令:

npm install autoprefixer postcss-short postcss-cssnext --save-dev

我们需要修改我们的gulp task来包含所有这些插件,代替用管道将所有这些插件一个一个的传递,我们将它们存储在易于维护和简洁的阵列。下面是我们的gulpfile.js的代码:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('postcss-cssnext');
var shortcss = require('postcss-short');
gulp.task('css', function() {
var plugins = [
shortcss,
cssnext,
autoprefixer({browsers: ['> 1%'], cascade: false})
];
return gulp.src('initial/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('final'));
});

您可能已经注意到了,我已经指定了Autoprefixer插件的一些选项。Autoprefixer输出这些选项确定的CSS,在这种情况下,我说的是插件支持所有全球使用量超过1%的浏览器。我也被禁用级联,让所有的前缀和不带前缀属性左对齐。类似的选项也可用于大多数其他插件。

为了测试,如果一切正常,将出在样式表下面的CSS:

.prefix-filter {
display: flex;
}

.cssshort-section {
text: #333 bold justify uppercase 1.25em 1.7 .05em;
}
.cssnext-link {
color: color(blue alpha(-10%));
}
.cssnext-link:hover {
color: color(orange blackness(80%));
}

如果现在在终端中运行gulp css,你应该在“final”文件夹中可以得到style.css,如下:

.prefix-filter {
display: -webkit-box;
display: flex;
}

.cssshort-section {
color: #333;
font-weight: 700;
text-align: justify;
text-transform: uppercase;
font-size: 1.25em;
line-height: 1.7;
letter-spacing: .05em;
}

.cssnext-link {
color: #0000ff;
color: rgba(0, 0, 255, 0.9);
}

.cssnext-link:hover {
color: rgb(51, 33, 0);
}

4.插件的执行顺序

在最后一节的例子很清楚说明了PostCSS的实用性。所有PostCSS的力量在于它的插件。

我们具体来研究两个插件 rgba-fallback 和 color-function , rgba-fallback 插件会转换一个RGBA颜色为16进制格式,color-function将改变CSS的color()函数来兼容更多菜单CSS,比方说,你有一下的CSS:

body {
background: color(orange a(90%));
}

如果你运行的颜色功能插件之前的RGBA-后备插件,就像这样:

var plugins = [
rgbafallback,
colorfunction
];

你将得到下面的CSS:

body {
background: rgba(255, 165, 0, 0.9);
}

正如你所看到的,在处理CSS时没有RGBA回退。这样的异常原因是回退插件运行时,它发现背景是color(orange a(90%)),并且不知道该怎么办。后来,color函数插件执行,并从原来的color函数创建RGBA颜色值。

如果你扭转插件顺序,按以下顺序运行它们:

var plugins = [
colorfunction,
rgbafallback
];

最后的CSS是这样的:
body {
background: #ffa500;
background: rgba(255, 165, 0, 0.9)
}

这一次的颜色插件首先把背景色的RGBA值和后备插件层增加一个十六进制回退。

总结

在本教程中我已经介绍了使用gulp和PostCSS一起使用的基本知识。随着插件和gulp的正确组合,可以节省开发的许多时间和避免不必要的麻烦。如果您有任何技术问题或建议,请尽管在本教程的下面进行评论,以便于我们能更好的学习交流。
资料由:成都点点通软件开发公司提供!

⑻ gulp不是内部或外部命令,也不是可运行的程序 或批处理文件.怎么解决

javac不是内部或外部命令,也不是可运行的程序或批处理文件解决办法: 1.安装jdk,安装方法:在官网下载好jdk之后,双击安装包,进入安装即可; 2.配置环境变量: a.JAVA_HOME:jdk安装目录 b.CLASSPATH:.;%JAVA_HOME%\lib” c.PATH:%JAVA_HOME%\bin 配置环境变量方法: 1.点击计算机,右键弹出菜单,选择属性; 2.进入属性之后,选择高级系统设置; 3.点击环境变量,然后依次添加环境变量已经变量值即可。

⑼ 输入gulp 命令时怎么提示是外部命令

ABD根本就不是个系统命令所以你输入的时候无法识别既然不要原理我就不多说了解决法先输入c:\windows\system32\cmd.exec:\windows\system32\abd.exe再输入abd他就不会提示了这个就是解决法

⑽ 如何使用gulp解决内核前缀问题

检查你的 node 版本和 gulp 版本
1、如果没有安装node可以参考我的《CentOS 7下手把手搭建hexo博客》中使用nvm来管理node;
2、如果没有安装gulp可以使用npm install --global gulp全局安装 gulp;
3、检查你的 node 版本和 gulp 版本;
$ node -vv5.0.0$ gulp -v[19:21:35] CLI version 3.9.0[19:21:35] Local version 3.9.0

初始化项目目录
使用 npm init 创建一个 package.json 存储依赖关系等配置信息,推荐使用,如图给出一个例子;;
创建 gulp 的配置文件 gulpfile.js,开始很简单,如图:
使用git init 创建版本库,并简单配置,如果不熟悉git操作可以去官网先看看;

测试gulp命令
$gulp
如图所示一切ok,现在没有任务;

安装依赖插件
$ npm install --save-dev gulp-autoprefixer browser-sync gulp-notify
其中:

gulp-autoprefixer 根据浏览器版本自动处理添加浏览器前缀

browser-sync 能让浏览器实时、快速响应文件更改(html、js、css、sass、less等)并自动刷新页面

gulp-notify 用于任务提醒
安装过程比较长慢慢等待,不过一定要确认安装成功;

安装成功之后package.json会保存插件,当前目录下会创建目录node_moles保存安装的插件;

5
以 browser-sync 为例来配置 gulpfile.js 文件
1、修改gulpfile.js如图所示:
2、创建源码目录src;
3、终端运行gulp,当修改文件的时候终端会发生变化;

阅读全文

与gulp不是内部命令相关的资料

热点内容
喷油螺杆制冷压缩机 浏览:577
python员工信息登记表 浏览:375
高中美术pdf 浏览:158
java实现排列 浏览:511
javavector的用法 浏览:979
osi实现加密的三层 浏览:230
大众宝来原厂中控如何安装app 浏览:911
linux内核根文件系统 浏览:240
3d的命令面板不见了 浏览:522
武汉理工大学服务器ip地址 浏览:146
亚马逊云服务器登录 浏览:521
安卓手机如何进行文件处理 浏览:70
mysql执行系统命令 浏览:927
php支持curlhttps 浏览:142
新预算法责任 浏览:443
服务器如何处理5万人同时在线 浏览:249
哈夫曼编码数据压缩 浏览:424
锁定服务器是什么意思 浏览:383
场景检测算法 浏览:616
解压手机软件触屏 浏览:348