实战环境搭建gulp

实战环境搭建

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\node_modules\[email protected]@node-sass\lib\binding.js:19:10)
at Object.<anonymous> (F:\severdemo\node_modules\[email protected]@node-sass\lib\index.js:14:35)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)

[email protected]@node-sass\vendor\win32-x64-57\binding.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

原文地址:https://www.cnblogs.com/shaozhu520/p/9737385.html

时间: 2024-10-31 04:50:11

实战环境搭建gulp的相关文章

Java Drp项目实战—— 环境搭建

概要 我们要開始一个关于Java项目的开发,那么我们就须要搭建一个关于Java开发的环境,那么搭建一个Java开发环境,都须要些什么东东,又有些什么注意事项呢. 过程 我先将我搭建Java环境的软件和开发用到的软件列一下,Jdk.Jre.MyEclipse.Oracle.Tomcat.PL/SQLDeveloper.PowerDesign.Rational Rose. 在搭建Java之前,我们必须先将这些软件都安装到我们的电脑上.怎样安装我们这里就仅仅说两个,一个Java执行环境包含Jdk和Jr

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文

jenkins gulp 持续集成环境搭建

本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.然后教你jenkins如何集成前端构建工具Gulp.不要怕,jenkins gulp 持续集成环境搭建其实也很简单,我会分为五步向你介绍jenkins gulp 持续集成并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 https://nodejs.org/en/download/ 下载得到这样的一个文件node-v6.9.

mybatis实战教程(mybatis in action)之一:开发环境搭建

文章转载自http://www.yihaomen.com/article/java/302.htm 什么是mybatisMyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XML或注解用于配置和原始映射,将接口和Java的POJOs(Plan Old Java Objects,普通的Java对象)映射成数据库中的记录. orm工具的基本思想无论是用过的hibernate,myb

Flask框架的学习与实战(一):开发环境搭建

Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2.很多功能的实现都参考了django框架.由于项目需要,在此记录下学习的过程及心得. 工欲善其事,必先利其器.就从搭建一套flask开发环境开始flask之旅吧. 一.平台说明 操作系统:window 7  64bit  数据库:mysql5.6  python:v2.7  开发集成软件:PyCharm5.0 二.开发环境搭建 1.安装flask框架包 1

iOS开发——实战OC篇&amp;环境搭建之Xib(玩转UINavigationController与UITabBarController)

iOS开发——实战OC篇&环境搭建之Xib(玩转UINavigationController与UITabBarController) 前面我们介绍了StoryBoard这个新技术,和纯技术编程的代码创建界面,本篇我们将介绍一个老的技术,但是在很多的公司或者库里面还是使用这个技术,既然如此它肯定有他的好处,至于好处这里我就不一一介绍了.在Xcode5之前是只能使用Xib或者代码的,而代码又对于很多初学者来说算是一个难题.毕竟不知道怎么下手.所以我就总结了一下这段时间自己编写程序的一个实例来说明怎么

iOS开发——实战OC篇&amp;环境搭建之纯代码(玩转UINavigationController与UITabBarController)

iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController) 这里我们就直接上实例: 一:新建一个项目singleView Controller,命名未iCocos 二:由于我们使用的纯代码实现的,所以删除其中的StoryBoard和Viewtroller的两个文件 三:新建一个继承自TabBar Controller的类,我们命名问iCocos ViewController 三:在Appdelegate的实现文件中导入刚刚

Git实战(三)环境搭建

上次的博文中,我们介绍了一下关于Git作为版本控制工具的基本原理,接下来我们来搭建一个基本的Git环境(由于我使用的是Windows系统,所以重点侧重在这方面). Git安装 Git的安装非常简单,这里就不再多作介绍了,给大家提供一个官方参考文档 http://git-scm.com/book/zh/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git Git中文环境 默认情况下,Git的Shell环境下是使用命令是无法显示中文字符的,为了显示中文,我们可以在使用命

《OD大数据实战》hive环境搭建

一.搭建hadoop环境 <OD大数据实战>hadoop伪分布式环境搭建 二.hive环境搭建 1. 准备安装文件 下载地址: http://archive.cloudera.com/cdh5/cdh/5/ hive-0.13.1-cdh5.3.6.tar.gz 2. 解压 tar -zxvf hive-0.13.1-cdh5.3.6.tar.gz -C /opt/modules/cdh/ 3. 修改配置 cd /opt/modules/cdh/hive-0.13.1-cdh5.3.6/con