Gulp 快速入手 - Githubissues

1、安装Node.js

因为gulp基于Node.js，下载地址：http://nodejs.cn/

2、安装NPM

NPM是Node的包管理工具，需要使用它来安装后续的东西。

NPM因为墙的缘故易下载失败，可以使用淘宝的cnpm来替换npm。

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

或者将npm的镜像路径指向淘宝

// 1.通过config命令
$ npm config set registry https://registry.npm.taobao.org 
$ npm info underscore （如果上面配置正确这个命令会有字符串response）
// 2.命令行指定
$ npm --registry https://registry.npm.taobao.org info underscore
// 3.编辑 ~/.npmrc 加入下面内容
$ registry = https://registry.npm.taobao.org

3、安装gulp

$ cnpm install gulp -g

到这一步gulp安装完成，接下来是配置gulp。

4、安装gulp开发依赖环境

$ npm install --save-dev gulp

5、新建package.js

$ cnpm init

根据提示输入信息，生成以下内容。

{   
    "name": "test",
    "version": "1.0.0",
    "description": "gulp test",
    "main": "gulpfile.js", // 入口文件
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {

    }
}

6、本地安装插件

$ cnpm install gulp-sass --save-dev

安装后可在Readme.md查看使用方法，这里以自动编译Sass为例子。

7、新建入口文件gulpfile.js

{
    var gulp = require("gulp");
    var sass = require("gulp-sass");

    gulp.task("sass", function() {
        return gulp.src('./src/sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./src/css'));
    });

    gulp.task("default", ["sass"], function() {
        gulp.watch("./src/sass/**/*.scss", ["sass"]);
    });
}

8、运行gulp default即可自动编译

$ gulp default

插件推荐：

编译Sass：gulp-sass
添加CSS3前缀：gulp-autoprefixer
上传至FTP：gulp-sftp
压缩JS：gulp-uglify
合并JS：gulp-concat
图片压缩：gulp-imagemin
压缩CSS并加时间戳：gulp-clean-css
批量图片转Base64：gulp-to-base64
自动合并精灵图：postcss-sprite

ONE-SUNDAY / Blog

Gulp 快速入手 #6