gulp安装+一个超简单入门小demo

gulp安装参考、gulp安装参考2、

一、NPM

npm是node.js的包管理工具，主要功能是管理、更新、搜索、发布node的包。

Gulp是通过npm安装的。

所以首先，需要安装node.js，并且升级npm到最新版本。

安装nodeJS

基本参考传送门戳这里：安装nodeJs、安装nodeJs2、nodeJs下express的安装到运行

1.    从nodejs.org下载最新的nodejs安装包，并安装。

2.    进入nodejs的安装路径下：

天真的以为这样就可以了。

没有权限!!!!!

于是用管理员权限重新进入这个cmd。

3.    重新输入[npminstall express]

这样应该就算是正常了吧。

4.    输入[npminstall jade]

5.    输入[npminstall mysql]

6.    当然，装什么组件，取决于环境搭建需求...

[简直tm废话，我第一次做这个，哪里知道自己需要什么]

这里查看node和npm的版本

7.    创建一个工程的必经之路

当然按照文档来的话，输入[npm install express -g]就可以了。

但是输出express -V时提示错误!

妈妈，我的脑子要炸了。

然后我就去百度：nodeJs安装express安装失败...

于是找到了！！！

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的工程了。

所以

1.在E盘下的myworkspace里新建一个gulp-test 文件夹作为一个新的工程。

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就可以啦。

这个时候css下就会多出index.css来