gulp 學習

 

Gulp.js 是一個自動化構建工具,開發者可使用它在項目開發過程當中自動執行常見任務。Gulp.js 是基於 Node.js 構建的.

安裝步驟：

 

1.首先安裝node.js,搭建環境。參考網址：http://www.runoob.com/nodejs/nodejs-install-setup.html

2.安裝包管理工具cnpm：參考網址：https://npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝gulp 模塊 。參考網址：http://www.gulpjs.com.cn/docs/

4.全局安裝gulp

$ cnpm install --global gulp

5.做爲項目的開發依賴（devDependencies）安裝

$ cnpm install --save-dev gulp

6.實現功能須要安裝的gulp工具（這裏是壓縮js 在項目目錄下執行安裝gulp-uglify)

cnpm install gulp-uglify --save-dev

7.在項目根目錄下建立一個名爲 gulpfile.js 的文件

var gulp = require('gulp');
var uglify = require("gulp-uglify");

gulp.task('default',function(){
	gulp.src('js/common.js')
    .pipe(uglify())                 // 直接壓縮common.js
    .pipe(gulp.dest('dist'))
})

8.在根目錄下執行gulp

9.查看結果

執行前：

執行後：

 最後附上一些案例：http://www.gowhich.com/blog/621

 

實戰：

var gulp = require('gulp'),
// 壓縮js
uglify = require('gulp-uglify'),
// 壓縮css
minifyCss = require('gulp-minify-css'),
// 壓縮html
htmlmin = require('gulp-htmlmin'),
// 去掉console
stripDebug = require('gulp-strip-debug');


// 壓縮 js 文件
gulp.task('js', function() {
	gulp.src([
		    "src/js/*/*.js",
		    "src/js/*.js"
		  ])
		.pipe(stripDebug())
//		.pipe(uglify({
//         mangle: {
//             toplevel: true  函數混淆壓縮
//          }
//         }))
		.pipe(uglify())
		.pipe(gulp.dest('dist/js'))
});

// 壓縮css
gulp.task('css', function() {
	gulp.src([
			'src/css/*/*.css',
			'src/css/*.css'
		])
		.pipe(minifyCss())
		.pipe(gulp.dest('dist/css'))
});

// 壓縮html
gulp.task('html', function () {
	var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true//壓縮HTML
    };

	gulp.src('src/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist'));
    gulp.src('src/tpl/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/tpl'));
});

// 移動資源
gulp.task('move', function() {
	gulp.src('src/mock/*.*')
		.pipe(gulp.dest('dist/mock'));
	gulp.src('src/Audio/*.*')
		.pipe(gulp.dest('dist/Audio'));
	gulp.src('src/fonts/*.*')
		.pipe(gulp.dest('dist/fonts'));
	gulp.src('src/images/*.*')
		.pipe(gulp.dest('dist/images'));
	gulp.src('src/mui picker/*.*')
		.pipe(gulp.dest('dist/mui picker'));
	gulp.src('src/manifest.json')
		.pipe(gulp.dest('dist'));
});

gulp.task('default', ['js','css','html','move']);