gulp的入門知識
一、全局安裝gulp
1、說明:全局安裝gulp目的是為了通過她執行gulp任務;
2、安裝:命令提示符執(zhi)行
npm install gulp -g
3、查看是否正(zheng)確安(an)裝:命令提示(shi)符執行
gulp -v
出現版本號即為正確安裝。
二、項目中安裝gulp
npm install --save-dev gulp
-注:全局安裝gulp是為了執行gulp任務,本地安裝gulp則是為了調用gulp插件的功能。
三、安裝gulp某個模(mo)塊(以gulp-less為(wei)例(li),編譯(yi)less文件)
npm install gulp-less --save-dev
四、新建package.json文件
npm init
根據提示進行填寫項目信息。
五、在項(xiang)目(mu)根目(mu)錄下新建(jian)gulpfile.js文件,gulpfile.js是(shi)gulp項(xiang)目(mu)的配置(zhi)文件,是(shi)位于(yu)項(xiang)目(mu)根目(mu)錄的普通js文件(其實將gulpfile.js放入其他文件夾下亦可),文件示例(li)如下:
1 2 3 4 5 | //導入工具包 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', 'elseTask']); //定義默認任務 elseTask為其他任務,該示例沒有定義elseTask任務//gulp.task(name[, deps], fn) 定義任務 name:任務名稱 deps:依賴任務名稱 fn: 回調//gulp.src(globs[, options]) 執行任務處理的文件 globs:處理的文件路徑(字符串或者字符串數組)//gulp.dest(path[, options]) 處理完后文件生成路徑
六、選裝cnpm
1、說明:因為npm安裝插件是從國外服務器下載,受網絡影響大,可能出現異常,如果npm的服務器在中國就好了,所以我們樂于分享的淘寶團隊干了這事。來自官網:“這是一個完整 npmjs.org 鏡像,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。”;
2、官方下載;
3、安裝:命令提示符執行
; 注意:安裝完后最好查看其版本號cnpm -v或關閉命令提示符重新打開,安裝完直接使用有可能會出現錯誤;
注:cnpm跟npm用法完(wan)全一致,只是在執行命(ming)令時將(jiang)npm改為cnpm

