Gulp初识

 

Gulp是什么家伙？

Gulp只是一个”工具“，基于NodeJs，自动化任务运行器。现常称”前端构建工具“。

说起”构建工具“，最早是C语言中Make，Java中的Ant（只要项目中某个文件有变化，就重新构建项目）

 

由于其强大的自动化构建和部署，2013年02月，前端第一个基于NodeJs的构建工具——Grunt v0.4.0 发布。

紧接着，第二年发布了一个新的构建系统Gulp，希望能够取其精华，并取代Grunt，成为最流行的JavaScript任务运行器。

 

Gulp和Grunt的异同点

易用—Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。

高效—Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。

高质量—Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。

易学—Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。

 

grunt的使用

ps：这是portal项目下的grunt配置文件

module.exports = function(grunt){
	grunt.initConfig({
		pkg : grunt.file.readJSON("package.json"),
		concat:{
			r2:{
				src: ['src/main/webapp/src/js/lib/jquery.js','src/main/webapp/src/js/lib/jquery.cookie.js','src/main/webapp/src/js/lib/jquery.freeCarousel.js','src/main/webapp/src/js/lib/jquery.lazyload.min.js','src/main/webapp/src/js/lib/dialog-min.js','src/main/webapp/src/js/lib/dialog-plus-min.js','src/main/webapp/src/js/lib/nprogress.js'],
        		dest: 'src/main/webapp/src/js/lib/r2.js'
			}
		},
		uglify : {
			options : {
				banner : '/*! <%= pkg.name %> author:<%= pkg.author %> <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
			},
			/* lib */
			r2:{
				files : {
					'src/main/webapp/dist/js/lib/r2.js' : ['src/main/webapp/src/js/lib/r2.js']
				}
			},
			common:{
				files:{
					'src/main/webapp/dist/js/common.v2.js' : ['src/main/webapp/src/js/common.v2.js']
				}
			},
			product:{
				files:{
					'src/main/webapp/dist/js/product.v2.js' : ['src/main/webapp/src/js/product.v2.js']
				}
			},
			blog:{
				files:{
					'src/main/webapp/dist/js/blog.v2.js' : ['src/main/webapp/src/js/blog.v2.js','src/main/webapp/src/js/ydhShare.v2.js']
				}
			}	
		},
		/*css*/
		less:{
			app: {
				files: {
				  "src/main/webapp/src/css/c.css": ["src/main/webapp/src/css/c.less"]
				}
			}
		},
		cssmin: {
			options: {
				keepSpecialComments : 0,
				banner : '/*! <%= pkg.name %> minified css file author:<%= pkg.author %> <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
			},
			app2 :{
				files:{
					'src/main/webapp/dist/css/c.v2.css':["src/main/webapp/src/css/common.v2.css","src/main/webapp/src/css/page.v2.css","src/main/webapp/src/css/ui-dialog.css","src/main/webapp/src/css/jiathis_share.v2.css","src/main/webapp/src/css/jiathis_counter.v2.css","src/main/webapp/src/css/nprogress.css"]
				}
			},
			index : {
				files: {
				  "src/main/webapp/dist/css/index.v2.css": ["src/main/webapp/src/css/index.v2.css"]
				}
			},
			buy : {
				files: {
				  "src/main/webapp/dist/css/buy.v2.css": ["src/main/webapp/src/css/buy.v2.css"]
				}
			},
			help : {
				files: {
					'src/main/webapp/dist/css/help.v2.css': ['src/main/webapp/src/css/help.v2.css']
				}
			}
		},
		imagemin: {
            /* 压缩图片大小 */
            dist: {
                files: [{
                    expand: true,
                    cwd: "src/main/webapp/src",
                    src: ["**/*.{jpg,png,gif}"],
                    dest: "src/main/webapp/dist"
                }]
            }
        },
		watch : {
			/*lib*/
			lib_common : {
				files: "src/main/webapp/src/js/common.v2.js",
				tasks:['uglify:common']
			},
			lib_app2 : {
				files: ["src/main/webapp/src/css/common.v2.css","src/main/webapp/src/css/page.v2.css","src/main/webapp/src/css/ui-dialog.css","src/main/webapp/src/css/jiathis_share.v2.css","src/main/webapp/src/css/jiathis_counter.v2.css"],
				tasks:['cssmin:app2']
			},
			lib_index:{
				files:"src/main/webapp/src/css/index.v2.css",
				tasks:['cssmin:index']
			}
		}
	});
	grunt.loadNpmTasks("grunt-contrib-concat");
	grunt.loadNpmTasks("grunt-contrib-uglify");
	grunt.loadNpmTasks("grunt-contrib-watch");
	grunt.loadNpmTasks("grunt-contrib-imagemin");
	grunt.loadNpmTasks("grunt-contrib-less");
	grunt.loadNpmTasks("grunt-contrib-cssmin");
	grunt.registerTask('default', ['watch']);
};

　　

Gulp的使用

ps：写的一个demo

/**
 * 组件安装
 * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
 */

// 引入 gulp及组件
var gulp    = require('gulp'),                 //基础库
    imagemin = require('gulp-imagemin'),       //图片压缩
    minifycss = require('gulp-minify-css'),    //css压缩
    jshint = require('gulp-jshint'),           //js检查
    uglify  = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean')             //清空文件夹

// HTML处理
gulp.task('html', function() {
    var htmlSrc = './src/main/webapp/*.html',
        htmlDst = './src/main/webapp/';

    gulp.src(htmlSrc)
        .pipe(livereload(server))
        .pipe(gulp.dest(htmlDst))
});

// 样式处理
gulp.task('css', function () {
    var cssSrc = './src/main/webapp/src/css/*.css',
        cssDst = './src/main/webapp/dist/css';

    gulp.src(cssSrc)
        //.pipe(sass({ style: 'expanded'}))
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(livereload(server))
        .pipe(gulp.dest(cssDst));
});

// 图片处理
gulp.task('images', function(){
    var imgSrc = './src/main/webapp/src/img/**/*',
        imgDst = './src/main/webapp/dist/img';
    gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(livereload(server))
        .pipe(gulp.dest(imgDst));
})

// js处理
gulp.task('js', function () {
    var jsSrc = './src/main/webapp/src/js/*.js',
        jsDst ='./src/main/webapp/dist/js';

    gulp.src(jsSrc)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(jsDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(livereload(server))
        .pipe(gulp.dest(jsDst));
});

// 清空图片、样式、js
gulp.task('clean', function() {
    gulp.src(['./src/main/webapp/dist/css', './src/main/webapp/dist/js', './src/main/webapp/dist/img'], {read: false})
        .pipe(clean());
});

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('html','css','images','js');
});

// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){

    server.listen(port, function(err){
        if (err) {
            return console.log(err);
        }

        // 监听html
        gulp.watch('./src/main/webapp/*.html', function(event){
            gulp.run('html');
        })

        // 监听css
        gulp.watch('./src/main/webapp/src/css/*.css', function(){
            gulp.run('css');
        });

        // 监听images
        gulp.watch('./src/main/webapp/src/img/**/*', function(){
            gulp.run('images');
        });

        // 监听js
        gulp.watch('./src/main/webapp/src/js/*.js', function(){
            gulp.run('js');
        });

    });
});

　　

差异和不同

流：Gulp是一个基于流的构建系统，使用代码优于配置的策略。
插件：Gulp的插件更纯粹，单一的功能，并坚持一个插件只做一件事。
代码优于配置：维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。
没有产生中间文件

I/O流程的不同

使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。
而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。

 

Gulp的API
gulp.task
gulp.run
gulp.watch
gulp.src
gulp.dest
gulp.task

 

Gulp.js的使用和插件的开发都很简单，当然里面还有很多细节，抛砖引玉，具体请看Gulp.js的官方文档。