一 装置gulp和bower

gulp装置: npm install -g gulp

bower装置: npm install -g bower

==注：== angularjs的一些包文件我们是经由过程bower来治理的

二 bower运用

1. 运用bower初始化一个项目: bower init
2. 填写工程名，形貌等等那些东西
3. 装置angularjs：bower install –save angular
4. 建立.bowerrc文件（注重window最好用命令行建立）

三 自动化东西gulp的运用

1. 初始化文件：npm init(一向回车下去就能够)
2. 在项目内里装置gulp：npm i –save-dev gulp
3. 装置gulp的依靠插件（只引见项目中用到的）gulp-clean，gulp-concat，gulp-connect，gulp-cssmin，gulp-imagemin，gulp-less，gulp-load-plugins，gulp-uglify,open（能够和上面装置gulp一样装置）
4. 建立gulpfile.js来编写gulp的设置

// 依靠
var gulp = require('gulp');
// 举行实例化(gulp-load-plugins这个模块背面能够经由过程$来操纵)
var $ = require('gulp-load-plugins')();

// open模块
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());
});

/*
*  html使命
*  建立目次src，在src下建立index.html
*  建立视图模版目次view，在个中寄存视图view的模版
*/
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使命
*  在src下建立style文件夹，内里寄存less文件。 
*/
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使命
*  在src目次下建立script文件夹，内里寄存一切的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());
});

// 每次宣布的时刻，能够需要把之前目次内的内容消灭，防止旧的文件对新的容有所影响。 需要在每次宣布前删除dist和build目次
gulp.task('clean', function () {
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean());
});

// 总使命
gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);

// 效劳
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']);
});

// 定义default使命
gulp.task('default', ['serve']);