一、安裝 Node.js node-v 查看 Node 版本 當前穩定版本 4.4.7css
二、Bower
安裝: html
npm i -g cnpm //使用國內鏡像源 可省略
cnpm i -g bower
經常使用命令: bower init bower install bower uninstall
node
三、安裝 Git 版本管理工具並建立一個倉庫npm
四、cd到項目文件中json
bower init //初始化 生成 bower.json 配置文件
五、用 Bower 下載文件gulp
路徑配置:
建立 .bowerrc 文件app
{ "directory":"lib" //bower 下載保存路徑 }
bower install --save angular (#1.2 +版本號)
bower install --save angular-validation (angular 表單效驗)
六、安裝自動化構建工具 guplless
cnpm i -g gulp
安裝 gulp 插件工具
npm init //生成一個配置文件 cnpm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-less gulp-imagemin gulp-load-plugins gulp-uglify gulp-plumber open
編寫任務於 gulpfile.js 中 用於 less、js 的編譯 合併和圖片的壓縮ui
var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var open = require('open'); var app = { srcPath: 'src/', devPath: 'build/', prdPath: 'dist/' }; gulp.task('lib', function() { gulp.src('bower_components/**/*.js') .pipe(gulp.dest(app.devPath + 'vendor')) .pipe(gulp.dest(app.prdPath + 'vendor')) .pipe($.connect.reload()); }); gulp.task('html', function() { gulp.src(app.srcPath + '**/*.html') .pipe(gulp.dest(app.devPath)) .pipe(gulp.dest(app.prdPath)) .pipe($.connect.reload()); }) 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()); }) gulp.task('less', function() { gulp.src(app.srcPath + 'style/index.less') .pipe($.plumber()) .pipe($.less()) .pipe(gulp.dest(app.devPath + 'css')) .pipe(gulp.dest(app.prdPath + 'css')) .pipe($.connect.reload()); }); gulp.task('js', function() { gulp.src(app.srcPath + 'script/**/*.js') .pipe($.plumber()) .pipe($.concat('index.js')) .pipe(gulp.dest(app.devPath + 'js')) .pipe($.uglify()) .pipe(gulp.dest(app.prdPath + 'js')) .pipe($.connect.reload()); }); 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', ['image', 'js', 'less', 'lib', 'html', 'json']); 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: 8577 }); open('http://localhost:8577'); 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']);
七、 啓動 gulp
gulp
目錄結構圖