实战环境搭建gulp

Posted 2021-01-10 shaozhu520

实战环境搭建

1.1环境
运行环境nodejs
使用gulp自动化编译scss，js等
使用bower管理依赖插件
使用requirejs作为模块加载器
使用bootstrap css作为样式框架
依赖jquery，jquery-ui两个库

1.2项目目录
node_modules为依赖模块文件
.bowerrc 为bower配置文件,包含模块安装目录配置
bower.json为bower配置文件,包含依赖模块等
gulpfile.js为gulp任务配置文件
package.json为程序配置文件,包含npm依赖模块等
Lib为bower.json dependencies中的依赖文件

-----------------------------------------------------------

-----------------------------------------------------------

1.node 环境

2.安装 git

3.在git 里面cd 项目目录

在 cmd 里面执行

bower install

或者

npm install -g bower

bower init

然后输入 name 等信息

一路通

安装完 项目目录会多了 bower.json

！！bower init
-----------------------------------------------------------

 

创建配置配件 配置bowe 下载目录（在git执行）
type null>.bowerrc

0.

{
"directory":"lib"
}

然后 在cmd 里面 cd到项目目录 然后 bower init（前面如果执行了 就跳过）

-----------------------------------------------------------

4.下载js 后面的 --save-dev 要加

bower install jquery bootstrap requirejs jquery-ui --save-dev

（save 加了这个才会有 json配置项版本信息）
-----------------------------------------------------------

5全局安装 gulp
Gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务，
gulp.js是基于node.js构建的，利用node.js流的威力，可以快速构建项目

npm install gulp -g
或者
cnpm install gulp -g

这里不要dev

cnpm install gulp -g

 

这个建议用CMD 装

必须全局安装！！！

gulp -v

这里注意 安装成功了 会有两个版本号

执行：gulp

 

 

-----------------------------------------------------------

Scss

Sass

 

n个css 变成一个 dist里面

-----------------------------------------------------------

配置 推荐用CMD

先
cnpm init

安装

cnpm install gulp-connect --save-dev

cnpm install gulp-webserver --save-dev

cnpm install gulp-sass --save-dev

cnpm install gulp-minify-css --save-dev

cnpm install gulp-cssimport --save-dev

cnpm install gulp-concat --save-dev

cnpm install gulp-notify --save-dev

cnpm install gulp-livereload --save-dev

 

 

都装完了

package.json 这个文件会写入配置文件

gulp

cnpm install gulp-cssimport --save-dev

-----------------------------------------------------------
Local gulp not found in F:demoxmxh
[16:02:54] Try running: npm install gulp

 

搭建一半 失败了 先放下

搭建两个

一个前台的服务 后台的服务

 

 

node_modules/gulp/bin/gulp.js

 

 

 

36.22

at Object.Module._extensions..node (module.js:681:18)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at module.exports (F:severdemo ode_modules[email protected]@node-sasslibinding.js:19:10)
at Object.<anonymous> (F:severdemo ode_modules[email protected]@node-sasslibindex.js:14:35)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)

 

[email protected]@node-sassvendorwin32-x64-57inding.node is not a valid Win32 ap

sass 的问题

 

1:11 58

gulp

报错

https://www.zhihu.com/question/33552192

`sudo npm install gulp -g` 就好了（全局安装，虽然能解决你的问题，但是一般我不这么用）。比较好的做法是，首先创建 package.json 文件，然后如你图中所示，`npm install gulp --save-dev`，这样会把 gulp 安装到当前目录下 node_modules 目录下。同时一个 gulp 的 executable 会被安装到 ./node_modules/.bin 下。此时你执行 。./node_modules/.bin/gulp 即可。这种方法比全局安装要好，因为用到的 gulp 的版本只和当前项目相关。如果觉得每次输入 ./node_modules/gulp 复杂，那么你在 package.json 中得 scripts 段落添加诸如 {"build": "gulp" }，然后每次在工程目录执行 npm build 即可。npm 运行脚本时，会自动到 ./node_modules/.bin 下查找对应的可执行文件。

作者：沈嵘
链接：https://www.zhihu.com/question/33552192/answer/56803638
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

----------------------------------------

npm install gulp --save-dev

作者：春雷
链接：https://www.zhihu.com/question/33552192/answer/65615013
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

我也是刚刚在尝试gulp（第1天），遇到了同样的问题，说一下解决的办法。我是在ubuntu14.04中，不同的环境情况可能不完全一样。不赞成 sudo npm install gulp -g 的全局安装，因为后期gulp会在自动引入项目相关的支持包，如果全局安装gulp，这些支持包全都安装在/usr/local/lib/node_modules/下，不利于管理，可能易引起冲突。应使用 $npm install --save-dev gulp 在项目中安装，gulp安装好的路径是项目下的 node_modules ，执行 glup时可使用指令：$node_modules/gulp/bin/gulp.js 如果觉得这样很麻烦，可用ln命令在项目路径下建立快捷方式：$ln -s node_modules/gulp/bin/gulp.js gulp$./gulp即可。============= 无耻的分隔线 =============时隔1个月之后，再次对 gulp 进一步系统地学习（这也是接触 gulp 的第二天）。这里谈一下全局安装遇到的奇怪问题，如下：按照 @桂子 提到的文章 nodejs 中的 NODE_PATH 一文，我设置了 NODE_PATH 和 npm prefix，设置好后，奇怪的事情发生了。在项目路径内执行 gulp ，系统仍然提示要求 npm install gulp ，也就是说仍然要求在项目内安装，即使执行$ /usr/local/lib/node_modules/gulp/bin/gulp.js 也仍然要求本地安装。这倒不奇怪，奇怪的是我更进一步的尝试发现，当在 /usr/local/lib 路径中调用 gulp 时，系统提示 “没有找到 gulpfile 文件”，说明路径已被认可了；而在其外一层路径中，就仍然要求本地安装gulp。请教，这是什么鬼？

cnpm install --save-dev gulp

 

 

npm install --save-dev gulp

 

lodash._basecopy

cnpm install gulp-livereload --save-dev

 

 

npm install gulp (这样可以 不要全局安装 全局安装会出问题)

 

 

 

真TM贱 gulp 不能全局安装

----------------------------------------

https://stackoverflow.com/questions/27431187/cannot-find-module-lodash