Gulp-前端自动化工具

[raclen]

这个东西也看了很多遍了，今天写个东西，因为大家都提倡资源优化（最小化），压缩图片，我经常要用到，以前都是用tinypngy一个个压缩，然后保存，现在就用gulp写一个图片的压缩。
首先默认你已经安装node
更改一下npm的镜像，国内的下载npm插件，容易失败（如果你可以正常下载，可以跳过了）

npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
Installing Gulp

安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：
npm install -g gulp
然后，在项目里面安装Gulp：
比如cd D:\git\jsCode\gulp_bulid
npm install --save-dev gulp
然后安装一堆插件，有人把它比如成外挂，好吧，都是外挂，DNF连发外挂
D:\git\jsCode\gulp_bulid>npm install --save-dev gulp-imagemin gulp-minify-css gu
lp-uglify gulp-jshint gulp-concat（具体有什么用，谷歌去）
如果以后还想安装插件就是用npm install --save-dev gulp-cache（插件名称）命令
现在要使用的就是gulp-imagemin
在项目根目录新建一个gulpfile.js，名称可以使用其它的吗，我也不清楚，跟我关系不大，忽略

/**
 * Created by XIAODI001 on 2015/3/6.
 * gulp
 */
console.log('begin ...');
var gulp = require('gulp');


/**
 * 需要使用什么插件当然要先引入它的模块啦
 */
var imagemin = require('gulp-imagemin'),
    notify = require('gulp-notify');//提示信息
/**
 * 一般事件的定义放在事件调用的上面，这里我们也把'任务'写到前面
 * 下面是一个压缩图片的任务（task）
 */
gulp.task('img',function(){
    return gulp.src('src/img/event_life/*')
        .pipe(imagemin({
            progressive: true

        }))
        .pipe(gulp.dest('./dest/img/event_life'))
        .pipe(notify({ message: 'img task ok' }));

});
/**
 *gulp 命令会执行defalut
 *我们只需要把要执行执行的函数都放在这个函数（或者事件，就像jquery的ready）里面
 *
 */
gulp.task('default',function(){
    console.log('common in default');
    gulp.run('img');

})
console.log('end ...');//

然后运行 gulp
激动人心的时刻来了
压缩完毕了，提交git出了问题，只有gulpfile.js提交成功了，其它的没add进去
The file will have its original line endings in your working directory.
No such file or directory
搜了搜有的说是版本问题，有的说不用管，不影响提交（瞎说）。。。
然后我准备换了一个GIT仓库，就把代码复制过去，我一看70M，我想我一个免费用户是不是不会给我这么大空间，就把node_modules过滤了，就提交成功了
相关代码https://github.com/ralcen/jsCode/tree/master/gulp_bulid
以上代码压缩力度不够，加上了imagemin-pngquant插件更给力了
//update 2016/10/31
从网易拷过来的额，下面的链接失效了
gulp-html-import//用来导入header和footer
gulp-uncss 可以用来剔除多余的css
gulp-uncss示例

#2015-02-04