nodejs gulp入门

文章参考 

http://www.gulpjs.com.cn/docs/getting-started/

http://www.gulpjs.com.cn/docs/api/

1. 全局安装 gulp:

$ npm install --global gulp

2. 作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4. 运行 gulp:

$ gulp

默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情


 gulp基本函数介绍

gulp.src(globs[, options]) 读取源文件

/**
 * 推荐
 * 将html模板页面 以angularjs的方式 压缩并缓存
 * */
gulp.task('angularTemplateCache', function () {
    return gulp.src('templates/wap/**/*.html')
		//templateHTML.js为压缩之后的文件名,注意.js后缀名不能少
        .pipe(templateCache("templateHTML.js",{
			//路径的前缀
			root: 'templates/wap/',
			//模块的名字
			module:"huangbiaoApp"
		}))
        .pipe(gulp.dest('dist/'));
});

gulp.dest(path[, options]) 输出到目标位置

/**
 * 推荐
 * 将service controller filter directive config 等逻辑js文件连接起来
 * */
gulp.task('concatJS', function () {
	
	gulp.src("dist/**/*.*")
        .pipe(concat("target"+new Date().getTime()+".js"))
        .pipe(gulp.dest("dist/temp/"))
	
});

gulp.task(name[, deps], fn) 定义任务

/**
 * 完成目标 需要做的事情 按照 配置顺序运行
 * */
gulp.task('default', function () {
    console.log("test gulp is ok!");
});

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])监控任务

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

event.type

类型: String

发生的变动的类型:added, changed 或者 deleted。

猜你喜欢

转载自hbiao68.iteye.com/blog/2305732