gulp安装+一个超简单入门小demo
一、NPM
npm是node.js的包管理工具。主要功能是管理、更新、搜索、公布node的包。
Gulp是通过npm安装的。
所以首先,须要安装node.js。而且升级npm到最新版本号。
安装nodeJS
基本參考传送门戳这里:安装nodeJs、安装nodeJs2、nodeJs下express的安装到执行
1. 从nodejs.org下载最新的nodejs安装包。并安装。
2. 进入nodejs的安装路径下:
天真的以为这样就能够了。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
没有权限!!!!!
于是用管理员权限又一次进入这个cmd。
3. 又一次输入[npminstall express]
这样应该就算是正常了吧。
4. 输入[npminstall jade]
5. 输入[npminstall mysql]
6. 当然。装什么组件,取决于环境搭建需求...
[简直tm废话,我第一次做这个。哪里知道自己须要什么]
这里查看node和npm的版本号
7. 创建一个project的必经之路
当然依照文档来的话,输入[npm install express -g]就能够了。
可是输出express -V时提示错误!
妈妈,我的脑子要炸了。
然后我就去百度:nodeJs安装express安装失败...
于是找到了!
!。
[npminstall -gd express]
出了一长串的这个.....
[npminstall -g express-generator]
然后再去查看express的版本号[express -V](这个v要大写哦!
。。!)
能够了!!
!
妈妈,我认为我又能够活过来了!!!
由于主要是为了用gulp,所以就不做nodeJs的执行小实验什么的了。
8. 选择安装cnpm
[npm install cnpm -g--registry=https://registry.npm.taobao.org
]
二、全局安装gulp[为了运行gulp任务]
[cnpminstall gulp -g]
[gulp-v]查看是否安装咯
先更新到这里...要下班了....
***********************************我是5月11日更新线*****************************************************
这次是来汇报一下,自上次装全然局gulp任务后的东西。
传送门:昨天到今天的思维启蒙要戳这里。和这里
有对照。有參照。就能够知道怎样进行下去。
上面的一系列操作。总结为一下两句话,
1.nodejs是自己主动安装在了c盘的program file以下的nodejs文件中。
2.相同,也把全局的gulp安装在了nodejs以下。
主要的环境算是已经做好了。
如今能够開始新建gulp的project了。
所以
1.在E盘下的myworkspace里新建一个gulp-test 目录作为一个新的project。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
2.以管理员的角色进node-command,
然后先进入E盘下的workspace(工作空间),
找到gulp-test1(第一个測试文件夹)
cd gulp-test1
3.在第一个測试文件夹中,依次安装node模块:
npm install --save-dev gulp
npm install --save-dev gulp-less
npm install --save-dev gulp-watch
npm install --save-dev require-dir
4.
在根文件夹新建gulpfile.js和gulp文件夹
在gulp目录里新建一个tasks目录和config.js文件
tasks目录里创建default.js,less.js,watch,js
tasks文件中放着相应的任务、
config.js配置任务的相关配置
4.1
gulpfile.js配置大概例如以下:
//导入工具包 require('node_modules里相应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less'); //定义一个testLess任务(自己定义任务名称)
gulp.task('testLess', function () {
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
}); gulp.task('default',['testLess']); //定义默认任务 //gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 运行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径
这里是主要參考上面传送门的链接里的文章进行的。
5.0 执行gulp
一般执行:gulp 任务名称
当执行gulp或者gulp default 时,会执行detault任务里全部的全部的任务。
default的任务里的全部任务例如以下:
gulp.task('default',['testLess']); //定义默认任务
没有运行gulp语句前的文件夹结构是这种
5.1 配置完毕后,在cmd中输入gulp testLess就能够啦。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
这个时候css下就会多出index.css来
gulp安装+一个超简单入门小demo的更多相关文章
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...
- FastDFS简单入门小demo
图片上传 需要引入 FastDFS 相关的jar包,但是这个jar没有在中央仓库,所以还得需要找到这个jar手动安装到自己的本地仓库才能使用. 需要一个配置文件 fdfs_client.conf ...
- 一听就懂:用Python做一个超简单的小游戏
写它会用到 while 循环random 模块if 语句输入输出函数
- 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...
- GitHub这么火,程序员你不学学吗? 超简单入门教程 【转载】
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...
- ECharts.js 超简单入门(本质canvas)
ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...
- 超简单入门Vuex小示例
写在前面 本文旨在通过一个简单的例子,练习vuex的几个常用方法,使初学者以最快的速度跑起来一个vue + vuex的示例. 学习vuex需要你知道vue的一些基础知识和用法.相信点开本文的同学都具备 ...
- angularJS入门小Demo【简单测试js代码的方法】
1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
随机推荐
- XP系统连接win10家庭版共享的打印机方法
1.高级共享设置.按照win7正常设置."家庭网络"公用网络”“工作网络”之类的注意根据当前配置设置! 2.由于控制面板无法开启Guest账户.需要用任务管理器,运行cmd(管理员 ...
- Hive学习笔记(四)-- hive的桶表
桶表抽样查询 查看hdfs上对应的文件内容 一个两个桶,第一个桶和第三个桶的数据 task = 4 4 / 2 = 2,一共是两个桶 第1个桶,第1+2个桶
- 带有命名空间的xml解析,C#
前一段时间做花旗的接口,返回的xml格式是带有命名空间的,可是难倒了我,找了好久才找到解决办法,给大家分享下,少走弯路. 1,直接进入正题,先看一段带有命名空间的xml,这段xml大概的意思是,前面是 ...
- python算法-汉诺塔问题
汉诺塔问题 初始状态: 思考:当盘子的个数是3的时候,大家写出移动顺序 移动的步骤: 3个盘子,从a到c 1.前面两个盘子,从a到b 1)把前面一个盘子,从a到c a->c 2)把第二个盘子 ...
- c4d 宝典部分二
一.tvart 文字 1.当选择工具 选择面或边时不出现对象坐标时,需要将容错的选项选中 2.当选择两个面右键挤压的时候,如果两个面不分离,需要取消群组并且 拉动箭头的时候需要在空白区域拉动 tvar ...
- [python工具][3]sublime常用配置 与操作指南
https://github.com/jikeytang/sublime-text http://zh.lucida.me/blog/sublime-text-complete-guide/
- uiautomator 一个简单脚本创建流程
http://www.codeceo.com/article/android-ui-auto-test.html
- 【转】Bad Smell(代码的坏味道)
1.Duplicated Code(重复的代码) 臭味行列中首当其冲的就是Duplicated Code.如果你在一个以上的地点看到相同的程序结构,那么当可肯定:设法将它们合而为一,程序会变得更好. ...
- 【bzoj4800】[Ceoi2015]Ice Hockey World Championship 折半搜索
题目描述 有n个物品,m块钱,给定每个物品的价格,求买物品的方案数. 输入 第一行两个数n,m代表物品数量及钱数 第二行n个数,代表每个物品的价格 n<=40,m<=10^18 输出 一行 ...
- 使用ssh建立隧道和web代理
动态端口转发(socket4/5代理): 通过ssh监听本地端口并把数据转发至远程动态端口 转发local port 至 ssh Server ssh -D ssh -qfTnN -D 本地目标端口 ...