5 创建项目
一、创建空目录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
![](https://res.hc-cdn.com/ecology/9.3.130/v2_resources\images\global\blog-dialog.png)
华为开发者空间发布
让每位开发者拥有一台云主机
- 点赞
- 收藏
- 关注作者
评论(0)