nodejs+gulp

1.Node js中使用HTML模板

在nodejs中如使用express框架，她默认的是ejs和jade渲染模板。由于我在使用的时候觉得她的代码书写方式很不爽还是想用html的形式去书写，于是我找了使用了html模板。
直接上代码，主要的是在app.engine(‘.html’, ejs.__express);app.set(‘view engine’, ‘html’);这两句。

var http = require('http'),
express  = require('express'),
fs = require('fs'),
ejs = require('ejs'),
path = require('path'),
zmq = require('zmq'),//http://zeromq.org/
msgpack = require('msgpack');//解压缩模块
var app = express();
app.set('port', process.env.PORT || 1235);
app.set('views', __dirname + '/sunxu/views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html');

app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'sunxu/public')));


if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}
app.get('/', function(req, res){
res.render('index', {title:'paint title'});
});
app.get('/users', function(req, res){
res.render('users', {title: 'users member'});
});

var http_server = http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});//创建服务器监听

参考文章：http://blog.sina.com.cn/s/blog_a0cc1c0b0101dp6i.html

2.npm和bower区别

(1) npm是node js的包管理器，用来下载安装node js的第三方工具包，也可以用来发布你自己开发的工具包。bower是一个前端库管理的工具，管理一些js库，比如说jQuery，bootstrap等。通过bower，你就不用自己去找jQuery文件了，通过配置文件就可以自动完成了。通过npm可以安装bower，命令如下： npm install -g bower

(2) 关键在于npm的依赖管理是奇特的倒向树结构（不同于linux越底层依赖越小）。一个普通的前端包的依赖树非常冗长，甚至可能触及windows下256字符的路径长度限制。同时和其它安装包不能共享依赖代码。导致文件非常多，不适合前端代码部署。而bower让模块开发者定义了简洁的输出文件。

参考文章：https://segmentfault.com/q/1010000002855012

3.安装bower,初始化，下载前端插件

(1)通过npm可以安装bower，命令如下： npm install -g bower
(2)用bower init 初始化，提示问题很多，默认就可以了。初始化后，发现在执行命令的当前文件夹下多了一个bower.json的文件。
(3)利用bower安装插件
命令: bower install –save jquery
执行完后，会发现dependencies中多了一条”jquery”:”^3.1.1”的记录。

4.查询gulp插件，配置gulpfile.js

https://www.npmjs.com/package/gulp-useref

参考文章：http://www.jianshu.com/p/3e0c16b2e7ef
http://www.imziv.com/blog/article/read.htm?id=60

可查看插件的用法、最新版本等信息。
常用插件：
gulp-uglify Js压缩插件

gulp-minify-css Css压缩插件 已过时 改用gulp-clean-css

gulp-imagemin 图片压缩插件，支持格式： PNG, JPEG, GIF and SVG images

gulp-strip-debug 清除源文件console,debugger代码

gulp-useref 合并html文件中的文件

gulp-sass 把 sass 编译为 css

gulp-clean-css
功能：压缩（minify） css 文件（这里只是压缩，但后面还需要用别的插件来重命名为 xxx.min.css 的形式）

gulp-concat
功能：合并文件。我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了

gulp-rename
功能：重命名文件（咚门：用过之后，发现并不能很好地满足我最初的需求：“可以批量处理，自动在 原文件名 基础上插入一个‘.min’”。非常死板，无法批量处理，只能具体文件具体重命名）

gulp-cheerio 插件可以 直接对html进行操作 从而把js，css文件的内容合并到html

gulp.task('indexHtml', function() {
    return gulp.src('index.html')
        .pipe(cheerio(function ($) {
            $('script').remove();
            $('link').remove();
            $('body').append('<script src="app.full.min.js"></script>');
            $('head').append('<link rel="stylesheet" href="app.full.min.css">');
        }))
        .pipe(gulp.dest('dist/'));
});

gulp-rev //- 对文件名加MD5后缀
gulp-rev-collector //- 路径替换
(参考文章:https://segmentfault.com/a/1190000002932998)

5.gulp插件使用过程中出现的问题
(1) gulp-imagemin 出错 出现unhandled error:141 spawn undefined……
解决方案：先卸载再重装gulp-imagemin
npm uninstall gulp-imagemin
npm install –save-dev gulp-imagemin

(2)警告：

warning: possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit.
data:    Trace
data:        at Socket.EventEmitter.addListener (events.js:160:15)
data:        at Socket.Readable.on (_stream_readable.js:653:33)
data:        at Socket.EventEmitter.once (events.js:179:8)
data:        at TCP.onread (net.js:527:26)

解决方法：
在gulpfile.js中添加

var EventEmitter = require('events').EventEmitter;
var emitter = new EventEmitter();
//emitter.setMaxListeners(100);
// or 0 to turn off the limit
//针对异常  Possible EventEmitter memory leak
emitter.setMaxListeners(Infinity); //设置为0不起作用

附加gulp插件使用实例代码：

var gulp = require('gulp');
var uglify = require('gulp-uglify'); //Js压缩插件
var cleanCss = require('gulp-clean-css'); //Css压缩插件
var stripDebug = require('gulp-strip-debug'); //清除源文件console,debugger代码
var useref = require('gulp-useref');  //合并html文件中的文件 不起作用  所以没用
var imagemin = require('gulp-imagemin');  //图片压缩插件，支持格式： PNG, JPEG, GIF and SVG images
var pngquant = require('imagemin-pngquant');
var gulpif = require('gulp-if');

var sass = require('gulp-sass');//把scss编译为css

var concat = require('gulp-concat');//合并文件
var sourcemaps = require('gulp-sourcemaps');//存放文件转换前后的映射关系
var rename = require('gulp-rename'); //文件重命名

//对html中元素进行操作
var cheerio = require('gulp-cheerio');

//对js 或 css添加Hash值后缀
var rev = require('gulp-rev');

//路径替换
var revCollector = require('gulp-rev-collector');

var EventEmitter = require('events').EventEmitter;
var emitter = new EventEmitter();
//emitter.setMaxListeners(100);
// or 0 to turn off the limit
//针对异常  Possible EventEmitter memory leak
emitter.setMaxListeners(Infinity); //设置为0不起作用

var srcPaths = {
   js:[
       'src/javascripts/*'
   ],
    css:[
        'src/stylesheets/css/*'
    ],
    scss:[
        'src/stylesheets/scss/*.scss'
    ],
    img:[
        'src/images/*'
    ],
    html:[
        'src/views/*'
    ],
    lib:{//第三方依赖文件
       js:[
           'src/bower_components/jquery/dist/jquery.min.js',
           'src/bower_components/bootstrap/dist/js/bootstrap.min.js'
       ],

       css:[
           'src/bower_components/bootstrap/dist/css/bootstrap.min.css'
       ]

    }
};

var distPaths = {
    js:'dist/javascripts',
    css:'dist/stylesheets',
    img:'dist/images',
    html:'dist/views'
};

//开发任务
// 返回一个 callback，因此系统可以知道它什么时候完成，详情可查看文章[Gulp异步任务的处理](http://blog.youkuaiyun.com/xyr05288/article/details/53114554)
gulp.task('develop',function(cb){
    //js
    gulp.src(srcPaths.js)
        .pipe(gulp.dest(distPaths.js));
    gulp.src(srcPaths.lib.js)
        .pipe(gulp.dest(distPaths.js));
    //css
    gulp.src(srcPaths.css)
        .pipe(gulp.dest(distPaths.css));
    gulp.src(srcPaths.scss)
        .pipe(sass())
        .pipe(gulp.dest(distPaths.css));
    gulp.src(srcPaths.lib.css)
        .pipe(gulp.dest(distPaths.css));

    //img
    gulp.src(srcPaths.img)
        .pipe(gulp.dest(distPaths.img));

    //html
    gulp.src(srcPaths.html)
        .pipe(gulp.dest(distPaths.html));

    cb();// 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

//部署任务 对静态资源先进行压缩合并处理后  再进行复制
gulp.task('release',function(cb){
    //js
    gulp.src(srcPaths.js)
        .pipe(stripDebug())  //去掉js中的console debugger代码
        .pipe(gulp.dest(distPaths.js));
    gulp.src(srcPaths.lib.js)
        .pipe(stripDebug())
        .pipe(gulp.dest(distPaths.js));
    //css
    gulp.src(srcPaths.css)
        .pipe(gulp.dest(distPaths.css));
    gulp.src(srcPaths.scss)
        .pipe(sass())
        .pipe(gulp.dest(distPaths.css));
    gulp.src(srcPaths.lib.css)
        .pipe(gulp.dest(distPaths.css));

    //img 压缩图片
    // progressive:true, 类型：Boolean 默认：false 无损压缩jpg图片
    // svgoPlugins:[{removeViewBox:false}],  不要移除svg的viewbox属性
    // use:[pngquant()]  使用pngquant深度压缩png图片的imagemin插件
    gulp.src(srcPaths.img)
        .pipe(
            imagemin({
                progressive:true,
                svgoPlugins:[{removeViewBox:false}],
                use:[pngquant()]
            }).on('error', function(e){ console.log(e); })
        )
        .pipe(gulp.dest(distPaths.img));

    //html useref 不起作用
    /*gulp.src(srcPaths.html)
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))  //js压缩
        .pipe(gulpif('*.css', cleanCss())) //css压缩
        .pipe(gulp.dest(distPaths.html));*/

    //合并 压缩 重命名js 对js加上MD5后缀
    gulp.src(srcPaths.js)
        .pipe(sourcemaps.init())
        .pipe(concat('indexMain.js'))
        .pipe(gulpif('*.js', uglify()))
        .pipe(rename('indexMain-min.js'))
        .pipe(sourcemaps.write())
        .pipe(rev())  //文件名添加MD5后缀
        .pipe(gulp.dest(distPaths.js))
        .pipe(rev.manifest())//生成rev-manifest.json 存放没有MD5后缀的文件名:有MD5后缀的文件名
        .pipe(gulp.dest('dist/rev'));

    //合并 压缩 重命名css
    gulp.src(srcPaths.css)
        .pipe(concat('index-style.css'))
        .pipe(cleanCss({compatibility: 'ie8'}))
        .pipe(rename('index-style-min.css'))
        .pipe(gulp.dest(distPaths.css));

    //更改dist html 中对js的引用  删去之前对js原文件的应用  改为对压缩合并后的js文件的引用
    gulp.src('src/views/index.html')
        .pipe(cheerio(function($,file){
            var scriptArr = $('script');
            for(var i=0; i<scriptArr.length; i++){
                var temp = $(scriptArr[i]);
                //console.log("i: " + i + " --- src: " + temp.attr('src'));
                if(temp.attr('src').indexOf("index")>-1){
                    //console.log("i: " + i);
                    $(scriptArr[i]).remove();
                }
            }

            $('body').append('<script src="/javascripts/indexMain-min.js"></script>');

        }))
        .pipe(gulp.dest(distPaths.html));

    cb();// 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

//gulp-rev-collector进行文件路径替换是依据 rev-manifest.json 的，所以要先成生 .json 文件，然后再进行替换；
gulp.task('release2',function(cb){
    //将html中没有hash后缀的js文件替换为有hash后缀的js文件
    gulp.src(['dist/rev/*.json','dist/views/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest(distPaths.html));
    cb();
});

/*
//开发构建
gulp.task('default',['develop'],function(){
     console.log("default!");
});*/

//监听事件 监听js变化
var watcher = gulp.watch(srcPaths.js, ['release','release2']);
watcher.on('change', function (event) {
    console.log('Event type: ' + event.type); // added, changed, or deleted
    console.log('Event path: ' + event.path); // The path of the modified file
});


//部署构建
gulp.task('default',['release','release2'],function(){
    console.log("default!");
});