gulp前端构建工具的搭建

我的机器：

3.13.0-32-generic #57-Ubuntu SMP Tue Jul 15 03:51:08 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux

1、安装nodejs

~$ wget https://nodejs.org/dist/v6.2.0/node-v6.2.0-linux-x64.tar.gz

~$ tar -zxvf node-v6.2.0-linux-x64.tar.gz

~$ sudo mv node-v6.2.0-linux-x64 /usr/local/node

~$ sudo chmod 755 /usr/local/node/* -R

然后修改：

~/.bashrc，对此文件进行修改

export NODE=/usr/local/node

export PATH=${NODE}/bin:$PATH

然后执行保存。

执行命令source ~/.bashrc。

2、安装cnpm

说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。32个！来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”；

官方网址：http://npm.taobao.org；

安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org；注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

3、全局安装gulp

说明：全局安装gulp目的是为了通过她执行gulp任务；

安装：命令提示符执行cnpm install gulp -g；

查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

4、基于gulp 的静态代码结构

通过gulp打包好(压缩、合并等操作)资源，通常会生成到新的一个文件夹内。像这样：

4.2、结合gulp静态资源分离实现的目的

4.2.1、将静态资源（img、js、css等跟程序部分完全分离），有利于处理CDN加速

4.2.2、方便在未打包和已打包资源切换调试，开发时当然不希望代码是压缩的

4.2.3、源码部分不想发布至线上，比如sass/less文件是不必放到线上的

5、接下来，我们需要将gulp安装到项目本地

　　1）先进入项目根路径： ~$ cd {projectpath}

　　2）新建package.json

{

  "name": "web",

  "version": "1.0.0",

  "description": "demo",

  "main": "index.js",

  "dependencies": {},

  "devDependencies": {

    "gulp": "^3.8.11",

    "gulp-less": "^3.0.1"

},

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "demo"

  ],

  "author": "zhujinming",

  "license": "ISC"

}

　　3）新建gulpfuile.js

//导入工具包 require('node_modules里对应模块')

var gulp = require('gulp'), //本地安装gulp所用到的地方

    less = require('gulp-less');

//    uglify= require('gulp-uglify');

//定义一个less任务（自定义任务名称）

gulp.task('less', function () {

    gulp.src('src/less/*.less') //

        .pipe(less()) //该任务调用的模块

        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css

});

gulp.task('default',['less', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务

//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数

//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)

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

4)src 目录包括：

　　css 为空目录。

5）执行gulp

结果：