自动化构建工具gulp环境搭建整理

自动化构建工具gulp:对源码进行编译合并压缩，减少http请求，提高效率等；


一：环境搭建前提

安装node、cnpm;

全局安装gulp cnpm install -g gulp;

在项目下初始化 cnpm init -----生成package.json配置文件；

安装gulp保存在配置文件中：cnpm install --save-dev gulp；

(说明：cnpm install 安装配置文件中的devDependencies依赖文件)

二：创建gulpfile.js

1.目录说明

build----生成项目，用于测试，代码未压缩

dist------生成发布项目，用于发布，代码已压缩

src------开发源码

2.常用api:

src----------读取文件、文件夹

dest---------生成文件、文件夹

watch-------监听文件

task---------定制任务

pipe---------以流的方式处理文件

流程：定制任务-->读取文件-->处理文件-->生成文件；监听文件变化执行-->任务；

package.json

{
"name": "webapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-connect": "^5.0.0",
"gulp-cssmin": "^0.1.7",
"gulp-imagemin": "^3.0.3",
"gulp-less": "^3.1.0",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^2.0.0",
"open": "0.0.5"
}
}

gulpfile.js

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();//$代替gulp-**
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
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());
});

//编译less，合并压缩；less文件引入方式：@import 'xxx.less';
gulp.task('less', function() {
gulp.src(app.srcPath + 'style/index.less')
.pipe($.plumber())
.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($.plumber())
.pipe($.concat('index.js'))
.pipe(gulp.dest(app.devPath + 'js'))
.pipe($.uglify())
.pipe(gulp.dest(app.prdPath + 'js'))
.pipe($.connect.reload());
});

//压缩img
gulp.task('image', function() {
gulp.src(app.srcPath + 'image/**/*')
.pipe($.plumber())
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin())
.pipe(gulp.dest(app.prdPath + 'image'))
.pipe($.connect.reload());
});

//项目输出build
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: 8080
});

open('http://localhost:8080');

//监听变化自动刷新
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
gulp.task('default', ['serve']);

第三方依赖管理工具bower

cnpm i -g bower

bower init  ----bower.json

bower install --save angular

bower uninstall

bower.json---配置文件

{
"name": "webapp",
"description": "webapp",
"main": "",
"keywords": [
"angularjs"
],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular": "1.5.8",
"angular-ui-router": "ui-router#0.3.1",
"angular-cookies": "1.5.8",
"angular-validation": "1.4.2",
"angular-animate": "1.5.8"
}
}

.bowerrc ----自定义依赖路径---命令行内创建方式: null>.bowerrc

{
"directory" : "app/vendor"
}

快速构建工具：yeoman

1.安装yeoman i -g yo

2.安装完执行：yo      //---选择 install a generators

3.安装：angular-seed

4.生成项目后安装依赖

bower install

cnpm install


快速搭建angular项目

angular-seed

generator-angular