gulp的简单操作

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

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

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

• gulp官方网址：http://gulpjs.com
• gulp插件地址：http://gulpjs.com/plugins
• gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
• gulp 中文API：http://www.ydcss.com/archives/424

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:UsersAdministratorAppDataRoaming pm，并且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的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申明，如果有不了解的地方，请看官方手册，手册是最好的教程。