使用gulp自动构建项目

0

简介

gulp是基于Nodejs的自动任务运行器, 她能自动化的完成javascriptcoffeesasslesshtmlimagecss 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

browserSync能让浏览器实时快速的响应文件的更改(htm、js、css),并自动刷新页面,更重要的是browserSync可以同时在pc、平板、手机等设备下进行调试。任何一次代码保存,浏览器设备都会同时显示您的改动。

gulp

gulp是基于nodejs的,所以我们可以用npm安装,首先需要项目中有npm的package.json文件,如果没有,就先初始化:

npm install

在项目中安装gulp:

npm install gulp-less --save-dev

如果安装成功了,在package.json中会存在如下节点:

// 省去了多余的
{
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

在根目录下创建文件gulpfile.js

var gulp = require('gulp');

gulp.task('default', function(){
    console.log('test');
});

我们创建了一个默认的gulp任务,在项目的终端输入命令:gulp,会运行这个gulp命令,并输出对应的test

解析less并压缩合并

项目中使用less编写样式非常的流利,但是浏览器不懂less的语法,我们需要把less解释为css才可以在浏览器里使用。

我们这里用gulp-less来把less解释成css,用gulp-minify-css来压缩css,用gulp-concat将多个css合并为一个css文件,节省流量。

安装依赖:

npm install gulp-less --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-concat --save-dev 

然后创建任务编译Less:

var gulp = require('gulp');
var concat = require('gulp-concat');
var gulpless = require('gulp-less');
var minifycss = require('gulp-minify-css');
var path = {
    less: './less/*.less'
};
gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(gulpless())
        .pipe(minifycss())
        .pipe(concat('build.min.css'))
        .pipe(gulp.dest('./css'));
});

然后在终端运行命令:gulp less,稍等几秒就可以看到将less文件夹下面的less打包并合并到css文件夹下,名字为:build.min.css

上面的命令可以解释为:创建任务less,将文件path.less代表的文件先运行任务gulpless()解析为css,然后继续将结果运行minifycss()任务进行压缩,然后将压缩后的css文件合并到build.min.css中,最后将这个文件输出到css文件夹下。

压缩合并js

项目中的js会越来越多,但是代码量不是很多,依次下载也会耗费多余的流量,所以把js进行压缩打包也是不错的选择。

打包需要用到的插件:

  • gulp-ng-annotate:但是当打包angular项目的时候,压缩的js会破坏angular的依赖注入,而gulp-ng-annotate解决的就是angular中依赖注入的问题。
  • gulp-uglify:压缩js
  • gulp-sourcemaps:生成source map。简单说,source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。

依次安装:

npm install gulp-uglify --save-dev
npm install gulp-ng-annotate --save-dev
npm install gulp-sourcemaps --save-dev

创建gulp的打包js的任务:

// 压缩js
var annotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

var path = {
    less: './less/*.less',
    js: './js/*.js',
};
gulp.task('js', function () {
    return gulp.src(path.js)
        .pipe(annotate({single_quotes: true}))
        .pipe(uglify())
        .pipe(concat('build.min.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./src/js'));
});

创建个启动任务:

gulp.task('serve',['less', 'js'], function(){
});

当在终端执行命令gulp serve之后,会运行lessjs任务。

browserSync

每次修改后都需要去手动到浏览器里刷新才看到显示结果,对于调试来讲是很痛苦的。幸运的是,有browserSync这个插件可以让代码保存后自动刷新。

依赖

  • browser-sync:让浏览器自动刷新
  • opn:跨平台 ) 打开文件,网站,可执行文件等。

安装

npm install browser-sync --save-dev
npm install opn --save-dev

创建一个静态服务器:

browserSync.init({
   server:{
        baseDir: path.src
    },
    port:3000,
    open:false
}, function(){
    var homepage = 'http://localhost:3000/';
    opn(homepage);
});

这样就创建了一个静态资源服务器,端口为3000,并默认打开首页。

browserSync.stream() 方法返回一个变换流,将输出的文件注入到浏览器,比如前面的less任务,添加语句让任务成功之后,将打包好的文件注入到浏览器。

gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(less())
        .pipe(gulp.dest('./src/css'))
        .pipe(browserSync.stream());
});

可以和gulp任务结合,当任务结束后静态注入或者刷新浏览器。

// 编译完less后,无刷新方式更新页面
gulp.watch(path.less, ['less']);
gulp.watch(path.js, ['js']);
// 修改页面和js后,页面刷新,重新加载
gulp.watch([path.html, path.js]).on("change", function() {
    browserSync.reload();
});

汇总

全部的依赖package.js

// 省略多余的
"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-sourcemaps": "^2.6.1",
    "gulp-uglify": "^3.0.0",
},

gulp任务gulpfile.js

// 引入定义工具
var gulp = require('gulp');
var concat = require('gulp-concat');
// less 编译用到
var less = require('gulp-less');
// 压缩css
var minifyCss = require('gulp-minify-css');
// 压缩js
var annotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
// 动态刷新
var browserSync = require('browser-sync');
var opn = require('opn');
// 定义路径
var path = {
    less: './src/app/components/**/*.less',
    css: './src/css/**/*.css',
    js: './src/app/**/*.js',
    html: './src/app/components/**/*.html',
    src: './'
};
//合并html模板命令--gulp template
var templateCache = require('gulp-angular-templatecache');
gulp.task('template', function () {
     gulp.src(path.html)
        .pipe(templateCache({module: 'templates'}))
        .pipe(gulp.dest('./src/js'));
});
gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(less())
        .pipe(minifyCss())
        .pipe(concat('build.min.css'))
        .pipe(gulp.dest('./src/css'))
        .pipe(browserSync.stream());
});
gulp.task('js', function () {
    return gulp.src(path.js)
        .pipe(annotate({single_quotes: true}))
        .pipe(uglify())
        .pipe(concat('build.min.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./src/js'));
});
gulp.task('serve',['less', 'js'], function(){
    browserSync.init({
        server:{
            baseDir: path.src
        },
        port:3000,
        open:false
    }, function(){
        var homepage = 'http://localhost:3000/';
        opn(homepage);
    });

    // 编译完less后,无刷新方式更新页面
    gulp.watch(path.less, ['less']);

    gulp.watch(path.js, ['js']);
    // 修改页面和js后,页面刷新,重新加载
    gulp.watch([path.html, path.js]).on("change", function() {
        browserSync.reload();
    });
});

ok,现在就可以实时的保存,浏览器会实时的刷新,非常爽~

你可能感兴趣的

载入中...