npm(cnpm)介紹(安裝gulp)


1、npm(node package manager) nodejs的包管理器,用於node插件管理(安裝、卸載、更新、管理依賴等);

2、使用npm安裝安裝插件:

  1)、命令提示符執行 npm install <name> [-g] [--save-dev];

  2)、卸載插件:npm uninstall <name> [-g] [--save-dev];(不要直接刪除本地插件包)

        刪除全部插件:npm uninstall gulp-less gulp-uglify ....;

    使用rimraf:npm install rimraf -g(安裝),刪除:rimraf node_modules

    更新插件:npm update <name> [-g] [--save-dev];

    更新全部:npm update [--save-dev];

    查看npm幫助:npm help;

    當前目錄已安裝插件查看:npm list;

    注:npm安裝插件過程:從http://registry.npmjs.org下載對應的插件包(該網站服務器位於國外,所以經常下載緩慢或出現異常),解決辦法如下!!!!

3、安裝cnpm

  說明:因為npm安裝插件是從外國服務器下載,受網絡影響大,可能出現異常,如果npm的服務器在中國就好了,所以我們樂於分享的淘寶團隊干了這事。32個口!來自官網:“這是一個完整的npmjs.org鏡像,你可以用此代替官方版本(只讀),同步頻率目前為10分鍾一次保證盡量u官方服務同步。”;官方網址:http://npm.taobao.org ;

安裝cnpm:命令提示符執行 npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安裝完后最好查看其版本號cnpm -v或關閉命令提示符重新打開,安裝完直接使用可能會出現錯誤;

(npm 與 cnpm 操作完全一樣)

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

 

4、安裝gulp

  (1)、全局安裝gulp

     說明:全局安裝gulp目的是為了通過它執行gulp任務;

      1)、安裝: cnpm install gulp -g;

  2)、查看是否正確安裝:gulp -v,出現版本號即為正確安裝;

  3)、新建package.json文件(此處可以省略);

  說明:package.json是基於nodejs項目必不可少的配置文件,它是存放在項目根目錄的普通json文件;(注:json文件是不能注釋的!!!!!!,參看:http://www.zhihu.com/question...”);

  4)、安裝:cnpm init,查看package.json幫助文檔,執行:cnpm help package.json

(2)、本地安裝gulp插件

  1)、

安裝:定位目錄命令后本地安裝gulp:cnpm install gulp --save-dev;

  2)、安裝插件:cnpm install gulp-less --save-dev;(該插件具有編譯less文件的功能)

    3)、新建gulpfile.js文件(非常重要,輸入命令后,都是根據這個配置文件來執行相應任務來實現gulp功能的) 

  

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','elseTask']);//定義默認任務elseTask為其他任務,該示例沒有定義elseTask任務

    //gulp.task(name[,deps],fn)定義任務  name:任務名稱   deps:依賴任務名稱   fn回調函數

    //gulp.src(globs[,options])執行任務處理的文件  globs:處理的文件路徑(字符串或者字符串數組)

    //gulp.dest(path[,options])處理完后文件生成路徑

 

  5、運行:gulp

   


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM