AngularJS-webapp

一、搭建开发环境

cnpm i -g bower

创建git仓库

cd webapp dir

git init

创建.bowerrc类文件技巧

null>.bowerrc

css预编译处理:less

常用语法:

定义变量

后代选择器

文件引用

函数

lesscss.cn

在线编译工具

tool.oschina.net/less

 cnpm i –save-dev gulp gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open

gulpfile.js

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/**/main.less‘)
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + ‘css‘))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + ‘css‘))
    .pipe($.connect.reload());
});

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());
});

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‘,‘json‘,‘html‘,‘less‘,‘lib‘]);

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: 5000
    });
    open(‘http://localhost:5000‘);
    
    gulp.watch(‘bower_components/**/*.js‘,[‘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‘]);

二、代码托管

CODE

先准备公钥

1 2 
下一页