关于gulp的一些入门坑！

刚到新公司，今天要搞一下gulp，本屌什么都不会，然后我就去百度了。原来他是基于Node.js平台运行的，然后我去就去官网下载了。

 

下载完了node，就要去安装了，这时候要开始装逼模式了，首先我们按菜单键加R（win+R）可以打开运行窗口。

 

然后我们输入cmd按回车键

进入了这个页面，就要开始各种各种的安装了，如果不懂的，可以去百度一下Node安装。

如果Node搞定了，那么接下来就要搞gulp了，可以看下面的链接

http://www.ydcss.com/archives/18
我当时也是看这个链接学的，嘻嘻。

如果学完了安装，那么就开始动手制作一个雪碧图吧。我先来一段网上复制的代码。

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');

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

    return gulp.src('./images/*.png')//需要合并的图片地址
        .pipe(spritesmith({
            imgName: 'images/sprite.png',//保存合并后图片的地址
            cssName: 'css/sprite.css',//保存合并后对于css样式的地址
            padding:5,//合并时两个图片的间距
            algorithm: 'binary-tree',//注释1
            cssTemplate: function (data) {
                var arr=[];
                data.sprites.forEach(function (sprite) {
                    arr.push(".icon-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+
                    "width:"+sprite.px.width+";"+
                    "height:"+sprite.px.height+";"+
                    "}\n");
                });
                return arr.join("");
            }

        }))
        .pipe(gulp.dest('dist/'));
});

具体情况可以查阅这个网站  http://www.cnblogs.com/qianlitiaotiao/p/5054231.html；

小弟我也是从这个网站学习的。

学完以后，有两个坑，各位可以注意一下：                                                         

1、就是我们全局安装了gulp，还要局部安装gulp，不然在node_modules找不到gulp的。

安装的命令：

局部安装：npm install --save-dev gulp（如果用淘宝的就是cnpm）。

2、就是你的图片一样要png，指的是初始化就是png，不能通过改jpg或者其他类型的图片的后缀变成Png的

这样的话会报错！

这个是报错的图，如果遇到上图一样的报错，估计就是那个原因了。

记住这两个坑！

希望自己越走越远。。

好吧我去学webpack了。。