Gulp初識

時間 2019-11-19

標籤 gulp 欄目 JavaScript 简体版

原文原文鏈接

Gulp是什麼傢伙？javascript

Gulp只是一個」工具「，基於NodeJs，自動化任務運行器。現常稱」前端構建工具「。css

提及」構建工具「，最先是C語言中Make，Java中的Ant（只要項目中某個文件有變化，就從新構建項目）html

因爲其強大的自動化構建和部署，2013年02月，前端第一個基於NodeJs的構建工具——Grunt v0.4.0 發佈。前端

緊接着，第二年發佈了一個新的構建系統Gulp，但願可以取其精華，並取代Grunt，成爲最流行的JavaScript任務運行器。java

Gulp和Grunt的異同點jquery

易用—Gulp相比Grunt更簡潔，並且遵循代碼優於配置策略，維護Gulp更像是寫代碼。web

高效—Gulp相比Grunt更有設計感，核心設計基於Unix流的概念，經過管道鏈接，不須要寫中間文件。npm

高質量—Gulp的每一個插件只完成一個功能，這也是Unix的設計原則之一，各個功能經過流進行整合並完成複雜的任務。例如：Grunt的imagemin插件不只壓縮圖片，同時還包括緩存功能。在Gulp中，緩存是另外一個插件，能夠被別的插件使用，這樣就促進了插件的可重用性。目前官方列出的有673個插件。json

易學—Gulp的核心API只有5個，掌握了5個API就學會了Gulp，以後即可以經過管道流組合本身想要的任務。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的官方文檔。