gulp前段自动换管理工具的使用学习

一直以来都想写一篇关于gulp的学习文章，今天有时间我正好将gulp工具的是使用复习一下。

1.首先我们来看下几个网站

2.gulp的使用离不开node，如果没有安装node，请自行百度。

node安装教程

3.本人比较爱国，不用苹果，所以就以win来做实例教程，如果谁有苹果，可与我联系

3.1使用win+R调出命令行

3.2使用node -v 查看node的版本

3.3使用npm -v 查看npm的版本

3.3.1npm说明

npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

3.3.2使用npm安装插件

3.3.2.1命令提示符执行npm install [-g] [--save-dev]；

3.3.2.2node插件名称。例：npm install gulp-less --save-dev

3.3.2.3-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

3.3.2.4--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

3.3.2.5-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；

3.3.2.6为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。

3.3.2.7使用npm卸载插件：npm uninstall [-g] [--save-dev] PS：不要直接删除本地插件包

3.3.2.8使用npm更新插件：npm update [-g] [--save-dev]

3.3.2.9查看npm帮助：npm help

3.3.2.10当前目录已安装插件：npm list

4.全局安装gulp

  • 安装命令：npm install gulp -g
  • 安装完之后可用gulp -v 查看

5.新建package.json文件

  1. 可使用npm init可以自行创建package.json

  2. 可使用npm help package.json

  3. 特别注意package.json文件是一个普通文件，不能添加任何注释。

  4. 内容如下

     {
   "name": "gulp",
   "version": "1.0.1",
   "description": "gulp demo",
   "main": "app.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
     "gulp"
   ],
   "author": "xiaozhang",
   "license": "ISC"
 }

6.本地安装gulp插件

  1. 执行npm install --save-dev

7.以下以less编译为例，来进项讲解

  1. 执行命令 npm install gulp-less --save-dev

  2. 本地将会创建一个文件夹，node——modules的文件夹。

  3. 在根目录下新建一个gulp.js文件

  4. 文件内如为

     //加载模块
 var gulp = require('gulp'),
 less = require('gulp-less');
 
 gulp.task('testLess', function () {
 	gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
 	.pipe(less())
 	.pipe(gulp.dest('./css'));
 });

  5. 运行gulp文件 命令执行gulp 任务名称 gulp less_css

8申明，如果有不了解的地方，请看官方手册，手册是最好的教程。