使用gulp搭建AngularJs【下】

使用gulp搭建AngularJs【下】

  • 2017-02-17
  • 次

接着上一篇文章，接下来我们写一写配置文件，下面我们会用到gulp几个方法。先了解了解

  • src(globs[, options])

    这个方法用于读取文件

    1. globs 类型：String 或 Array
    2. options 类型：Object

  • dest(path[, options])

    这个方法很好理解,它经常与pipe()一起使用，通过.pipe()将其拷贝到指定目录下，如果某文件夹不存在，将会自动创建它

    1. path 类型：String or Function
    2. options 类型：Object

  • task(name[, deps], fn)

    这个方法用于开启一个任务

    1. name 类型：String
    2. deps 类型：Array
    3. fn 类型: Function 回调函数

  • watch(glob [, opts], tasks)

    这个方法用于检测文件，当文件修改时返回一个change 事件

    1. globs 类型：String 或 Array
    2. opts 类型：Object
    3. tasks 类型：Array

开始动手

在根目录下创建gulpfile.js文件

引入之前安装的插件

1
2
3
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');

定义一个全局变量

1
2
3
4
5
var app = {
	srcPath: 'src/',   	//源码目录
	devPath: 'build/',	//开发环境目录，代码整合后会写到这里
	prdPath: 'dist/'	//生产环境，代码压缩后会写到这里
 };

定义任务

1
2
3
4
5
6
gulp.task('lib',function(){
 	gulp.src('www/**/*.js')    //**是指深度遍历，*是通配符
 	.pipe(gulp.dest(app.devPath + 'vendor')) //通过流（pipe)将读取后的文件拷贝到开发环境中
 	.pipe(gulp.dest(app.prdPath + 'vendor')) //将读取后的文件拷贝到生产环境中
 	.pipe($.connect.reload());
 });

实现本地服务器

1
2
3
4
5
6
7
8
gulp.task('serve', ['build'], function(){
	$.connect.server({
		root: [app.devPath],    //默认从开发目录读取
		livereload: true,	   	//设置是否刷新浏览器
		port: 1234				//端口
	});
	open('http://localhost:1234');
});

但这里还有一个问题，当我们修改文件后需要手动重新编译，这时候watch就发挥作用了

1
2
3
4
5
6
gulp.watch('www/**/*', ['lib']);
gulp.watch(app.srcPath + '/**/*.html', ['html']);
gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
gulp.watch(app.srcPath + 'image/**/*', ['image']);

这下子就达到自动构建的目的~但。。。是，好像还不够，浏览器不会自动刷新啊，这一点很不友好~

我们这样处理–

  • 在每个task后面调用$.connect.reload()去通知浏览器自动刷新
1
2
3
4
5
6
gulp.task('lib',function(){
	gulp.src('www/**/*.js')
	.pipe(gulp.dest(app.devPath + 'vendor'))
	.pipe(gulp.dest(app.prdPath + 'vendor'))
	.pipe($.connect.reload());
});

像reload和livereload 在低版本的ie浏览器就不支持了,但这年头谁还用ie啊 [/调皮脸]

当然，如果你觉得每次都得输入gulp.serve太麻烦想偷个懒，我们可以这样设置

1
gulp.task('default', ['serve']);

现在直接在terminal输入gulp就可以运行啦~

需要完整代码请戳这里

就先吹水到这里，有问题下面留言~

感谢您的阅读，本文由 lynhao 原创提供。如若转载，请注明出处：lynhao（http://www.lynhao.cn）
使用gulp工具搭建AngularJs【上】
浅谈Js栈