没有IE9+、Chrome、Firefox等现代化浏览器,我都不好意思给你看!
一线城市的陕西人,回西安吧,这里需要你们!

前端开发自动化构建工具

[前端开发] 人气:2935 2017-02-20 11:47:29 评论:-
赞:34
前端构架工具

前端开发自动化构建工具


标签: 前端构架工具 gulp


前端自动化的概述


前端自动化,这样的一个名词听起来非常的有吸引力,向往力。当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知,百度有FIS,腾讯有Modjs,360有燕尾服,还有很多团队在使用Ant,Shell等,而现在讨论较多的是Gulp。

目前的前端构架工具有哪些?


bower,grunt,gulp,karma,webpack

1. bower(前端包管理器)

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源

官网:https://bower.io

教程:bower简明入门教程

2.grunt(JavaScript世界的构建工具)

grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:压缩文件,合并文件,简单语法检查。

官网:http://www.gruntjs.net/

教程:Grunt学习

3.gulp(用自动化构建工具增强你的工作流程!)

官网:http://www.gulpjs.com.cn/

教程:gulp 教程

特点:

易于使用

构建快速

插件高质

易于学习

4.karma(一个测试工具)

github地址:https://github.com/karma-runner/karma

安装:安装 Karma

5.webpack(最热门的前端资源模块化管理和打包工具)

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

中文指南:http://webpackdoc.com/

今天着重介绍gulp构架工具

gulp介绍安装及使用


gulp VS grunt

易用

Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码。

高效

Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件。

高质量

Gulp的每个插件只完成一个功能,这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。他表示,在Gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。目前官方列出的有673个插件。

易学

Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要的任务。

使用Grunt的I/O过程中会产生一些中间态的临时文件,一些任务生成临时文件,其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理,通过管道将多个任务和操作连接起来,因此只有一次I/O的过程,流程更清晰,更纯粹。

代码优于配置

维护Gulp更像是写代码,而且Gulp遵循CommonJS规范,因此跟写Node程序没有差别。

入门指南

1.全局安装 gulp:

$ npm install --global gulp

2.作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

3. 在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require('gulp');
gulp.task('default', function() { // 将你的默认的任务代码放在这 });

4.运行 gulp

$ gulp

gulp五大函数

gulp.task(name, fn),注册一个 gulp 任务

gulp.run(...tasks),并行运行多个 gulp 任务

gulp.watch(glob, fn),实时监控内容,当 glob 内容变化时,执行 fn

gulp.src(glob),glob 是目标文件的路径,返回一个可读的 stream

gulp.dest(gloc),glob 是输出路径,返回一个可写的 stream

gulp使用实例

项目地址:https://git.oschina.net/kermityu/tplPc.git

引入gulp插件

插件列表:http://gulpjs.com/plugins/

var gulp = require('gulp'),
    //压缩js文件
    uglify = require('gulp-uglify'),
    //重命名文件
    rename = require('gulp-rename'),
    //压缩css文件
    cssnano = require('gulp-cssnano'),
    //less文件
    less = require('gulp-less'),
    //压缩html
    htmlmin = require('gulp-htmlmin'),
    //压缩图片
    imagemin = require('gulp-imagemin'),
    //合并文件
    concat = require('gulp-concat'),
    //项目清理
    clean = require('gulp-clean');

task任务

//压缩js
gulp.task('convertJS', function(){
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});


// 合并并压缩css
gulp.task('convertCSS', function(){
  return gulp.src('src/css/app.css')
    .pipe(less())
    .pipe(concat('app.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});
// 合并并压缩html
gulp.task('convertHTML', function(){
  return gulp.src('src/*.html')
    .pipe(htmlmin())
    .pipe(gulp.dest('dist/'));
});


//压缩图片
gulp.task('convertIMG', function(){
  return  gulp.src('src/imgs/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/imgs'));
});


//引入其他资源
gulp.task('moveLib', function(){
  return  gulp.src('src/lib/*')
    .pipe(gulp.dest('dist/lib'));
});


//目标目录清理
gulp.task('clean', function() {
  gulp.src(['dist'], {read: false})
    .pipe(clean());
});

多任务

gulp.task('build', ['convertJS', 'convertCSS', 'convertHTML',
'convertIMG','moveLib']);

完整代码

var gulp = require('gulp'),
    //压缩js文件
    uglify = require('gulp-uglify'),
    //重命名文件
    rename = require('gulp-rename'),
    //压缩css文件
    cssnano = require('gulp-cssnano'),
    //less文件
    less = require('gulp-less'),
    //压缩html
    htmlmin = require('gulp-htmlmin'),
    //压缩图片
    imagemin = require('gulp-imagemin'),
    //合并文件
    concat = require('gulp-concat'),
    //项目清理
    clean = require('gulp-clean');
//压缩js
gulp.task('convertJS', function(){
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});
// 合并并压缩css
gulp.task('convertCSS', function(){
  return gulp.src('src/css/app.css')
    .pipe(less())
    .pipe(concat('app.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});
// 合并并压缩html
gulp.task('convertHTML', function(){
  return gulp.src('src/*.html')
    .pipe(htmlmin())
    .pipe(gulp.dest('dist/'));
});
//压缩图片
gulp.task('convertIMG', function(){
  return  gulp.src('src/imgs/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/imgs'));
});
//引入其他资源
gulp.task('moveLib', function(){
  return  gulp.src('src/lib/*')
    .pipe(gulp.dest('dist/lib'));
});

//目标目录清理
gulp.task('clean', function() {
  gulp.src(['dist'], {read: false})
    .pipe(clean());
});

gulp.task('build', ['convertJS', 'convertCSS', 'convertHTML', 'convertIMG','moveLib']);

调用任务

调用build任务

$gulp build

将项目使用资源打包到了项目更目录下的dist文件下面。


icon喜欢(34)

评论这篇文章

数据加载中...