IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    Gulp不完全入门教程

    dwqs发表于 2015-07-18 14:54:04
    love 0

    引言

    gulp 是基于 Nodejs 的自动任务运行器，能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，gulp 借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单.

    一、安装Gulp

    gulp 是基于 Nodejs 的自动任务运行器，所以安装gulp之前要先安装node.js环境。

    打开Nodejs官网，点击硕大的绿色“install”按钮，可以检测一下安装的Node和npm版本：

    然后全局安装gulp：

    1. npm install -g gulp

    同样安装完之后，可以检测gulp的版本：

    全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

    1. npm install gulp

    如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：

    1. npm install  gulp --save-dev

    --save：将保存配置信息至package.json（package.json是nodejs项目配置文件。package.json是一个普通json文件，不能添加任何注释。参看 http://www.zhihu.com/question/23004511
    ）；
    -dev/-dep：保存至package.json的devDependencies节点，不指定-dev/dep将保存至dependencies节点；

    安装Gulp之后，可以运行npm init初始化package.json文件：

    需要注意的是，name是不能包含大写字母的:

    初始化之后，需要在项目的根目录下建立gulpfile.js文件，文件名不能更改：

    1. var gulp = require('gulp');
    3. gulp.task('default', function() {
    4.   console.log('hello gulp');
    5. });

    默认任务将被运行，向控制台输出hello gulp。如果需要运行单个任务, 使用 gulp taskname命令(上述等效于gulp default)。

    也可以看gulp官方的 Getting Started

    二、Gulp API

    gulp在git上只介绍了四个API：task、dest、src、watch，除此之外，gulp还提供了一个run方法。

    1.gulp.src(globs[, options])
    src()方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件.

    参数 说明
    globs 需要处理的源文件匹配符路径
    options 有3个属性buffer、read、base

    globs的文件匹配说明：
    “src/a.js”：指定具体文件；
    “*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；
    “**”：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
    “{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
    “!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

    1. var gulp = require('gulp'),
    3. gulp.task('test', function () {
    4.     //gulp.src('test/style.css')
    5.     gulp.src(['css/**/*.css','!css/{extend,page}/*.css'])
    6.         .pipe(gulp.dest('./css'));
    7. });

    options的三个属性说明：
    options.buffer： 类型：Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；
    options.read： 类型：Boolean 默认：true 设置false，将不执行读取文件操作，返回null；
    options.base： 类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接

    2.gulp.dest(path[, options])
    dest()方法是指定处理完后文件输出的路径；

    参数 说明
    path 指定文件输出路径，或者定义函数返回文件输出路径亦可
    options 有2个属性cwd、mode

    options.cwd
    Type: String Default: process.cwd()
    cwd for the output folder, only has an effect if provided output folder is relative.
    options.mode
    Type: String Default: 0777
    Octal permission string specifying mode for any folders that need to be created for output folder.

    修改之前的gulpfile.js的内容如下：

    1. var gulp = require('gulp');
    3. gulp.task('testtask', function() {
    4.   gulp.src('./js/test.js')
    5.       .pipe(gulp.dest('./build'));
    6. });

    运行结果如下图：

    利用gulp.dest('./build')将新建的test.js文件移动到了build目录，对比前后两次的ls -al命令，dest()会自动创建目录。

    3.gulp.task(name[, deps], fn)
    该方法用于定义一个gulp任务。

    参数 说明
    name 任务名称，不能包含空格
    deps 该任务依赖的任务，依赖任务的执行顺序跟在deps中声明的顺序一致
    fn 该任务调用的插件操作

    再次修改gulpfile.js文件，定义一个任务列表

    1. var gulp = require('gulp');
    3. gulp.task('task1',function(){
    4.         console.log('task1 done');
    5. });
    7. gulp.task('task2',function(){
    8.         console.log('task2 done!');
    9. });
    11. gulp.task('task3',function(){
    12.         console.log('task3 done');
    13. });
    15. gulp.task('end',['task1','task3','task2'],function(){
    16.         console.log('end done');
    17. });

    运行结果：

    4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
    watch()方法是用于监听文件变化，文件一修改就会执行指定的任务.

    参数 说明
    glob 需要处理的源文件匹配符路径
    opts 具体参看https://github.com/shama/gaze；
    tasks 需要执行的任务的名称数组
    cb(event) 每个文件变化执行的回调函数

    每当监视的文件发生变化时，就会调用cb函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息:
    type:属性为变化的类型，可以是added,changed,deleted
    path:属性为发生变化的文件的路径

    1. gulp.task('uglify',function(){ 
    2.     //do something 
    3. }); 
    4. gulp.task('reload',function(){ 
    5.     //do something 
    6. }); 
    7. gulp.watch('js/**/*.js', ['uglify','reload']);
    8. watcher.on('change', function(event) {
    9.   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    10. });
    12. // same as 
    13. gulp.watch('js/**/*.js', function(event){ 
    14.     //变化类型 added为新增,deleted为删除，changed为改变
    15.     console.log(event.type); 
    16.     //变化的文件的路径
    17.     console.log(event.path); 
    18. });

    5.gulp.run()
    gulp模块的run()方法，表示要执行的任务。可能会使用单个参数的形式传递多个任务。注意：任务是尽可能多的并行执行的，并且可能不会按照指定的顺序运行.

    修改之前的gulpfile.js文件中的end任务：

    1. gulp.task('end',function(){
    2.     gulp.run('task1','task3','task2');
    3. });

    运行结果：

    三、gulp常见插件

    1.gulp-uglify
    使用gulp-uglify压缩javascript文件，减小文件大小。

    利用npm先安装gulp-uglify:

    1. npm install --save-dev gulp-uglify

    安装之后，在gulpfile.js中引入：

    1. var gulp = require('gulp'),
    2.     uglify = require("gulp-uglify");
    4. gulp.task('minify-js', function () {
    5.     gulp.src('js/*.js') // 要压缩的js文件
    6.     .pipe(uglify())
    7.     .pipe(gulp.dest('dist/js')); //压缩后的路径
    8. });
    10. ###压缩多个文件
    11. var gulp = require('gulp'),
    12.     uglify = require('gulp-uglify');
    14. gulp.task('jsmin', function () {
    15.     //多个文件以数组形式传入
    16.     gulp.src(['src/js/index.js','src/js/detail.js']) 
    17.         .pipe(uglify())
    18.         .pipe(gulp.dest('dist/js'));
    19. });
    21. var gulp = require('gulp'),
    22.     uglify= require('gulp-uglify');
    24. ##匹配符“!”，“*”，“**”，“{}”
    25. gulp.task('jsmin', function () {
    26.     //压缩src/js目录下的所有js文件
    27.     //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）
    28.     gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js']) 
    29.         .pipe(uglify())
    30.         .pipe(gulp.dest('dist/js'));
    31. });

    2.gulp-rename
    用来重命名文件流中的文件。用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。

    1. npm install --save-dev gulp-rename

    简单运用：

    1. var gulp = require('gulp'),
    2.     rename = require('gulp-rename'),
    3.     uglify = require("gulp-uglify");
    5. gulp.task('rename', function () {
    6.     gulp.src('js/jquery.js')
    7.     .pipe(uglify())  //压缩
    8.     //会将jquery.js重命名为jquery.min.js
    9.     .pipe(rename('jquery.min.js')) 
    10.     .pipe(gulp.dest('js'));
    11. });

    3.gulp-minify-css
    压缩css文件时并给引用url添加版本号避免缓存:

    1. npm install --save-dev gulp-minify-css

    简单运用：

    1. var gulp = require('gulp'),
    2.     cssmin = require('gulp-minify-css');
    3.     //确保已本地安装gulp-make-css-url-version [npm install gulp-make-css-url-version --save-dev]
    4.     cssver = require('gulp-make-css-url-version'); 
    6. gulp.task('testCssmin', function () {
    7.     gulp.src('src/css/*.css')
    8.         .pipe(cssver()) //给css文件里引用文件加版本号（文件MD5）
    9.         .pipe(cssmin())
    10.         .pipe(gulp.dest('dist/css'));
    11. });

    4.gulp-htmlmin
    使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。

    1. npm install --save-dev gulp-htmlmin

    简单使用：

    1. var gulp = require('gulp'),
    2.     htmlmin = require('gulp-htmlmin');
    4. gulp.task('testHtmlmin', function () {
    5.     var options = {
    6.         removeComments: true,//清除HTML注释
    7.         collapseWhitespace: true,//压缩HTML
    8.         //省略布尔属性的值 <input checked="true"/> ==> <input />
    9.         collapseBooleanAttributes: true,
    10.         //删除所有空格作属性值 <input id="" /> ==> <input />
    11.         removeEmptyAttributes: true,
    12.         //删除<script>的type="text/javascript"
    13.         removeScriptTypeAttributes: true,
    14.         //删除<style>和<link>的type="text/css"
    15.         removeStyleLinkTypeAttributes: true,
    16.         minifyJS: true,//压缩页面JS
    17.         minifyCSS: true//压缩页面CSS
    18.     };
    19.     gulp.src('src/html/*.html')
    20.         .pipe(htmlmin(options))
    21.         .pipe(gulp.dest('dist/html'));
    22. });

    5.gulp-concat
    用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了.

    1. npm install --save-dev gulp-concat

    简单使用：

    1. var gulp = require('gulp'),
    2.     concat = require("gulp-concat");
    4. gulp.task('concat', function () {
    5.     gulp.src('js/*.js')  //要合并的文件
    6.     .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    7.     .pipe(gulp.dest('dist/js'));
    8. });

    其它常用插件：

    gulp-imagemin:压缩图片文件
    gulp-jshint:侦测javascript代码中错误和潜在问题的工具

    相关文章：gulp plugins 插件介绍

    相关链接：

    Gulp
    Gulp API
    Gulp Plugins
    Get Started
    npmjs
    nodejs

    淡忘~浅思猜你喜欢

    重温Jquery –JQuery系列教程
    DOM笔记（四）：HTML 5 DOM复杂数据类型
    问题：关于贴友分类菜单的实现
    我读《周鸿祎自述》
    Apache：如何利用.htaccess文件对PHP网站或文件进行伪静态处理
    无觅

    转载请注明：淡忘~浅思 » Gulp不完全入门教程



沪ICP备19023445号-2号
友情链接