1. 程式人生 > >gulp安裝+一個超簡單入門小demo

gulp安裝+一個超簡單入門小demo

hang span pac 昨天 content expr ng- arch 什麽

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