5 创建项目
【摘要】
一、创建空目录jobapp，用于存放我们将要开发的项目（可以手动创建，也可以命令创建）
二、创建git初始化仓库
打开终端，进入项目目录，执行命令$ git init
三、配置bower.json
打开终端，进入项目目录，执行命令$ bower init
四、安装AngularJS
打开终端，进入项目目录，执行命令$ bower install --save an...
一、创建空目录jobapp，用于存放我们将要开发的项目（可以手动创建，也可以命令创建）
二、创建git初始化仓库
打开终端，进入项目目录，执行命令$ git init
三、配置bower.json
打开终端，进入项目目录，执行命令$ bower init
四、安装AngularJS
打开终端，进入项目目录，执行命令$ bower install --save angular#1.5.8
五、在当前目录下，安装nodejs的模块
打开终端，进入项目目录，执行命令$ npm init
六、在当前目录下，安装gulp
打开终端，进入项目目录，执行命令$ npm install --save-dev gulp
七、安装其他gulp插件
打开终端，进入项目目录，执行命令$ npm install --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open
安装好后，我们可以在package.json文件中看到：
八、创建gulpfile.js文件，写入代码：
// 引入模块 var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var open = require('open'); // 定义全局变量，用来声明目录路径 var app = { srcPath: 'src/', devPath: 'build/', prdPath: 'dist/' }; /* *编写任务 */ //拷贝lib第三方依赖 gulp.task('lib', function() { gulp.src('bower_components/**/*.js') .pipe(gulp.dest(app.devPath + 'vendor')) .pipe(gulp.dest(app.prdPath + 'vendor')) .pipe($.connect.reload()); }); //拷贝html文件 gulp.task('html', function() { gulp.src(app.srcPath + '**/*.html') .pipe(gulp.dest(app.devPath)) .pipe(gulp.dest(app.prdPath)) .pipe($.connect.reload()); }); //拷贝json文件 gulp.task('json', function() { gulp.src(app.srcPath + 'data/**/*.json') .pipe(gulp.dest(app.devPath + 'data')) .pipe(gulp.dest(app.prdPath + 'data')) .pipe($.connect.reload()); }); //CSS gulp.task('less', function() { gulp.src(app.srcPath + 'style/index.less') .pipe($.less()) .pipe(gulp.dest(app.devPath + 'css')) .pipe($.cssmin()) .pipe(gulp.dest(app.prdPath + 'css')) .pipe($.connect.reload()); }); //JS gulp.task('js', function() { gulp.src(app.srcPath + 'script/**/*.js') .pipe($.concat('index.js')) .pipe(gulp.dest(app.devPath + 'js')) .pipe($.uglify()) .pipe(gulp.dest(app.prdPath + 'js')) .pipe($.connect.reload()); }); //image gulp.task('image', function() { gulp.src(app.srcPath + 'image/**/*') .pipe(gulp.dest(app.devPath + 'image')) .pipe($.imagemin()) .pipe(gulp.dest(app.prdPath + 'image')) .pipe($.connect.reload()); }); //合并任务 gulp.task('build', ['html', 'json', 'less', 'js', 'image', 'lib']); //clean清除任务 gulp.task('clean', function() { gulp.src([app.devPath, app.prdPath]) .pipe($.clean()); }); //启动服务任务 gulp.task('serve',['build'], function() { $.connect.server({ root: [app.devPath], livereload: true, port: 1234 }); open('http://localhost:1234'); gulp.watch('bower_components/**/*', ['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']); }); //设置默认任务 gulp.task('default',['serve']);
文章来源: www.cnblogs.com，作者：姜腾腾，版权归原作者所有，如需转载，请联系作者。
原文链接：www.cnblogs.com/jiangtengteng/p/6796601.html
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）