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:    Tracedata:        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 leakemitter.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 imagesvar pngquant = require('imagemin-pngquant');var gulpif = require('gulp-if');var sass = require('gulp-sass');//把scss编译为cssvar 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 leakemitter.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.csdn.net/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!");});