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. 創建一個project的必經之路
當然依照文檔來的話，輸入[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的project了。
所以
1.在E盤下的myworkspace裏新建一個gulp-test 目錄作為一個新的project。
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來
gulp安裝+一個超簡單入門小demo