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']);