基于Node.js的JavaScript项目构建工具gulp的使用教程


Posted in Javascript onMay 20, 2016
npm install gulp --save-dev

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

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

gulp安装命令

sudo npm install -g gulp

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

npm init .

安装gulp包

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

基于Node.js的JavaScript项目构建工具gulp的使用教程

安装插件
安装常用插件:

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下的全部依赖,如下图所示:

基于Node.js的JavaScript项目构建工具gulp的使用教程

完整的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-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

Javascript 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
Jquery倒计时源码分享
May 16 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
JavaScript中用let语句声明作用域的用法讲解
May 20 #Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 #Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 #Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 #Javascript
详解JavaScript中的事件流和事件处理程序
May 20 #Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 #Javascript
JavaScript中的Object对象学习教程
May 20 #Javascript
You might like
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
python设置表格边框的具体方法
2020/07/17 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
护理专业自荐信
2013/12/03 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
介绍信的写法
2015/01/31 职场文书
高三教师工作总结2015
2015/07/21 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
Python爬取某拍短视频
2021/06/11 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python