文档章节

gulp构建前端工程

半张一块
 半张一块
发布于 2016/07/27 16:22
字数 1803
阅读 2809
收藏 99

什么是gulp?

gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的jscss代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具,像Bower,Yeoman,Grunt等。

gulp和grunt的异同点

易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。
高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。

因为gulp是用node.js写的,所以你需要在你的终端上安装好npmnpmnode.js的包管理器,所以先在你的机子上安装好node.js

gulp安装命令

sudo npm install -g gulp

在根目录下新建package.json文件

npm init .

安装gulp

npm install gulp --save-dev  

安装好后再次输入gulp -v查看版本号,如下图显示则为成功:

安装插件

安装常用插件:

sass的编译                  (gulp-ruby-sass)
自动添加css前缀              (gulp-autoprefixer)
压缩css                    (gulp-minify-css)
js代码校验                  (gulp-jshint)
合并js文件                  (gulp-concat)
压缩js代码                  (gulp-uglify)
压缩图片                    (gulp-imagemin)
自动刷新页面                 (gulp-livereload)
图片缓存,只有图片替换了才压缩  (gulp-cache)
更改提醒                    (gulp-notify)
清除文件                    (del)

安装这些插件需要运行如下命令:

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

-save-save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

gulp命令

你仅仅需要知道的5个gulp命令

gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数

gulp.run(tasks...):尽可能多的并行运行多个task

gulp.watch(glob, fn):当glob内容发生改变时,执行fn

gulp.src(glob):置需要处理的文件的路径,可以是多个文件以数组的形式,也可以是正则

gulp.dest(path[, options]):设置生成文件的路径

glob:可以是一个直接的文件路径。他的含义是模式匹配。
gulp将要处理的文件通过管道(pipe())API导向相关插件。通过插件执行文件的处理任务。

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

gulp.task这个API用来创建任务,在命令行下可以输入$ gulp [default],(中括号表示可选)来执行上面的任务。

gulp官方API文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 插件大全:http://gulpjs.com/plugins/

开始构建项目

在项目根目录下新建一个gulpfile.js文件,粘贴如下代码:

//在项目根目录引入gulp和uglify插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');

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

注:gulpfile.js文件名不可更改。
项目需要用到uglify和rename插件,执行以下命令安装:

npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename

以我的为例,进入gulpfile.js所在目录:

cd /Users/trigkit4/gulp-test

然后输入:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('compress',function(){
    return gulp.src('script/*.js')
    .pipe(uglify())
    .pipe(rename('jquery.ui.min.js'))
    .pipe(gulp.dest('dist'));
});

该命令会安装package.json下的全部依赖,如下图所示:

完整的gulpfile.js

// 载入外挂
var gulp = require('gulp'), 
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
 
// 样式
gulp.task('styles', function() { 
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});
 
// 脚本
gulp.task('scripts', function() { 
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});
 
// 图片
gulp.task('images', function() { 
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});
 
// 清理
gulp.task('clean', function() { 
  return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
    .pipe(clean());
});
 
// 预设任务
gulp.task('default', ['clean'], function() { 
    gulp.start('styles', 'scripts', 'images');
});
 
// 看守
gulp.task('watch', function() {
 
  // 看守所有.scss档
  gulp.watch('src/styles/**/*.scss', ['styles']);
 
  // 看守所有.js档
  gulp.watch('src/scripts/**/*.js', ['scripts']);
 
  // 看守所有图片档
  gulp.watch('src/images/**/*', ['images']);
 
  // 建立即时重整伺服器
  var server = livereload();
 
  // 看守所有位在 dist/  目录下的档案,一旦有更动,便进行重整
  gulp.watch(['dist/**']).on('change', function(file) {
    server.changed(file.path);
  });
 
});

注:pipe()stream模块里传递数据流的一个方法,第一个参数为插件方法,插件会接收从上游流下的文件,进行处理加工后,再往下流。

gulp.task('任务名称', function () {
    return gulp.src('文件路径')
        .pipe(...)
        .pipe(...)
        // 直到任务的最后一步
        .pipe(...);
});

如果想使用gulp直接启动服务器

添加gulp-connect

npm install gulp-connect --save-dev

添加task

gulp.task('webserver', function() {
    connect.server({
        livereload: true,
        port: 8888
    });
});

gulp插件

  • gulp-gh-pages:使用gulp来把markdown生成html文档并上传到git pages

https://github.com/shinnn/gulp-gh-pages


var gulp = require('gulp');

var ghPages = require('gulp-gh-pages');



gulp.task('deploy', function() {

  return gulp.src('./dist/**/*')

    .pipe(ghPages());

});
  • gulp-jade插件:将jade编译成html文件

  • gulp-less插件:将less编译成css文件


var less = require('gulp-less');

var path = require('path');

 

gulp.task('less', function () {

  return gulp.src('./less/**/*.less')

    .pipe(less({

      paths: [ path.join(__dirname, 'less', 'includes') ]

    }))

    .pipe(gulp.dest('./public/css'));

});
  • gulp-live-server 插件:方便的,轻量级的服务器


var gulp = require('gulp');

  var gls = require('gulp-live-server');

  gulp.task('serve', function() {

  //1. serve with default settings

  var server = gls.static(); //equals to gls.static('public', 3000);

  server.start();



  //2. serve at custom port

  var server = gls.static('dist', 8888);

  server.start();



  //3. serve multi folders

  var server = gls.static(['dist', '.tmp']);

  server.start();



  //use gulp.watch to trigger server actions(notify, start or stop)

  gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {

    server.notify.apply(server, [file]);

  });

});
  • gulp-livereload,可以实时保存刷新,那样就不用按F5和切换界面了

  • gulp-load-plugins:在你的package.json文件中自动加载任意的gulp插件


$ npm install --save-dev gulp-load-plugins

例如一个给定的package.json文件如下:


{

    "dependencies": {

        "gulp-jshint": "*",

        "gulp-concat": "*"

    }

}

gulpfile.js中添加如下代码:


var gulp = require('gulp');

var gulpLoadPlugins = require('gulp-load-plugins');

var plugins = gulpLoadPlugins();

plugins.jshint = require('gulp-jshint');

plugins.concat = require('gulp-concat');

  • gulp-babel:gulp 的babel插件,


$ npm install --save-dev gulp-babel babel-preset-es2015

使用方法:


const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
    return gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});

官方github: https://github.com/gulpjs/gulp

© 著作权归作者所有

半张一块
粉丝 26
博文 68
码字总数 44042
作品 2
宁波
架构师
私信 提问
加载中

评论(8)

半张一块
半张一块 博主

引用来自“万万羊”的评论

什么什么啊,连个完整的步骤都没有

这个是给有一定基础的人的,你看看基础然后再看就会了
半张一块
半张一块 博主

引用来自“xuanskyer”的评论

相较FIS而言,有什么优势呢

配置比fis简单,fis配置太多了,太庞大了
万万羊
什么什么啊,连个完整的步骤都没有
xuanskyer
xuanskyer
相较FIS而言,有什么优势呢
whinc
whinc
不错
小九酒
小九酒
Hao
半张一块
半张一块 博主

引用来自“leonooo”的评论

从grunt到gulp,再到webpack,前端在于折腾!
不过什么工具简单方便,就用什么,好用简单就行。
leonooo
leonooo
从grunt到gulp,再到webpack,前端在于折腾!
nodejs+gulp+webpack基础知识

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/English0523/article/details/100009783 知识点涉及怎么结合gulp、w...

天府云创
08/22
0
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
2018/01/08
0
0
ES6项目构建-1

基础架构 任务自动化gulp 1.什么是任务自动化 减少人工操作,让机器自动监听操作,自动响应。 2.什么是gulp 一个工具。解决自动构建的工具,增强工作流。 3.gulp的作用 完成工作流。利用它的...

yy不会笑
2017/12/18
0
0
gulp koa nodejs 实现的前段工程分离开发

安装nodejs安装gulp 新建一个工程文件夹运行命令 这个过程中 nodejs会询问你,诸如工程name、版本号之类的信息,按照情况填写就好了结果如下图: init结束后生成了package.json文件 这个文件...

千惊万喜
2016/09/19
67
0
读vue源码看前端百态2--打包工具

上图是的文件。 除了 一些很有名的js库,纷纷使用来作为打包工具,所以想必有它的优势。除了,当然还有一些大家耳熟能详的打包自动化工具,比如,这篇我们就来看一下他们的区别,以免书到用时方...

Wendydesigner
02/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[转]详解netty原理分析

详解netty原理分析 Netty是一个高性能、异步事件驱动的NIO框架,它提供了对TCP、UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,...

morpheusWB
12分钟前
1
0
for循环

九九乘法表 示例:for(int i = 1; i <= 9; i++){ for (int j = 1; j <= i; j++) { // 每次开始i循环,j都会重新定义为j=1,然后开始循环计算 System.out.print(j +......

Shutting
34分钟前
9
0
小王子1

一定要帅! 韩国设计师品牌 insgram全世界得网红 韩国潮男穿搭 HM 找到穿衣服最好看的人,跟他比,比他好看。 在兴趣前,不要表现目的性,压力 关系是不热就冷的! 不喜欢压力,不喜欢负责任...

阿锋zxf
53分钟前
11
0
时间戳

1 loadTimeString(ts) { var d = new Date(); if (String(ts).length == 10) { d = new Date(ts * 1000); ......

东方巨人
55分钟前
7
0
Redis Cluster

Redis Cluster 集群 redis集群有以下几种方式 普通一主多从 普通一主多从+哨兵 cluster分片模式 一主多从 搭建方式网上很多,就不多描述了。 这种集群方式,一般master用作写,slave用做读,...

lazy~
55分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部