一寸光阴一寸金,寸金难买寸光阴!

    

Gulp简要入门笔记

Gulp简要入门笔记

gulp:

是一款基于node的前端自动化构建工具,它可以工程化完成许多重复性的各种文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件改动后重复这些步骤。因为这些过程其实是有规律可循,因此我们可以通过构建工具来帮助我们快速地自动化重复执行。

的思想:

gulp使用了node中的流((stream))管道思想,使数据像流水一样通过管道进行输出与输入,管道便是 .pipe( ),使用内存来过渡,而不是像grunt那样直接使用硬盘的直接写入,因此拥有更优秀的性能。

简要工作流程:

1、使用gulp.src( )找到目录下的 .js/css/sass等各种需要处理的 文件流;

2、通过gulp.pipe( )将文件流导入到各种插件中进行处理;

3、再次通过gulp.pipe( )将流传给gulp.dest( ),该指令可以将数据流写入到相应的目录文件中;

1、gulp的安装;

由于gulp依赖于node,因此在安装gulp之前需要先安装node;然安装之前可以先在终端中输入node -v用于确定环境是否已经安装node了。安装node可以通过直接在官网下载pkg安装包,https://nodejs.org;

安装完node后,会自带安装其包管理器npm,我们便可以通过它来进行gulp的安装了。

直接在终端中输入:npm install -g gulp

全局安装完gulp后,还需要在每个项目中单独安装,终端中进入到项目目录,执行终端命令:

    npm install gulp

如果想创建时直接写入package.json,是使用:

    npm install --save-dev gulp

2、gulp API学习

gulp的API十分的简介清晰,常用的主要有:
gulp.src()gulp.pipe(),gulp.task(),gulp.dest(),gulp.watch(),gulp.run();

gulp.src(globs[, options]):

globs:字符串或数组,是文件匹配模式,可以通过文件路径来定位文件,获取文件流(stream),后可以使用pipe管道输入到各种插件中;

[options]:对象,可选参数;里面包含多个属性;

options.buffer:类型: Boolean 默认值: true

如果该项被设置为 false,那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时候将会很有用。注意:插件可能并不会实现对 stream 的支持。

options.read:类型: Boolean 默认值: true

如果该项被设置为 false, 那么 file.contents 会返回空值(null),也就是并不会去读取文件。

options.base:类型: String

设置基准路径,影响导出文件路径,会使用传入dest()的路径替换掉 原始路径中base部分。如

    gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
      .pipe(minify())
      .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'
    
    gulp.src('client/js/**/*.js', { base: 'client' })
      .pipe(minify())
      .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

该方法是可以将pipe导入的数据流写入对应的文件中。可以同时写入多个文件;如:

    gulp.src('./client/templates/*.jade')
      .pipe(jade())
      .pipe(gulp.dest('./build/templates'))
      .pipe(minify())
      .pipe(gulp.dest('./build/minified_templates'));

gulp.task(name[, deps], fn):

该方法是用于定义gulp任务;

    gulp.task('taskname', function() {
      // 做一些事
    });

deps:类型:数组 可选参数,可定义一系列任务列表,将会在任务之前执行;

    gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
      // 做一些事
    });

Tip:列表中的任务将被并行执行;

gulp.watch(glob[, opts], tasks):

监视文件的变化,如果变化,则执行 tasks任务;

    var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
    watcher.on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });

gulp.watch(glob[, opts, cb]):

    gulp.watch('js/**/*.js', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });

总结 gulp API:

gulp.task: 表示创建gulp任务;

gulp.src:输入的目录,通过 *.js可以匹配到js目录下的所有js文件;

gulp.pipe:管道指令,可以理解为加入执行队列;

gulp.dest:处理后的文件输出的目录;

gulp.watch:实时监控文件改变,一旦改变则马上执行任务;

3、自动加载配置中的插件,gulp-load-plugins;

我们可以在项目中为gulp保存一份配置文件:package.json,然后使用gulp-load-plugins这个插件便可以一次性加载配置中保存的所有插件;

    var gulp = require('gulp');
    //加载gulp-load-plugins插件,并马上运行它
    var plugins = require('gulp-load-plugins')();

4、使用gulp进行JS的压缩,gulp-uglify;

1、在项目中新建一个gulpfile.js文件,用于写入gulp配置代码;

2、安装gulp-uglify模块,终端输入:npm install --save-dev gulp-uglify;

3、在gulpfile.js中载入gulp模块

    // 获取 gulp
    var gulp = require('gulp');

4、载入gulp-uglify模块:

    // 获取 uglify 模块(用于压缩 JS)
    var uglify = require('gulp-uglify');

5、创建gulp任务;

    // 压缩 js 文件
    gulp.task('javascript', function() {
        // 1. 找到文件
        gulp.src('js/*.js')
        // 2. 压缩文件
            .pipe(uglify())
        // 3. 另存压缩后的文件
            .pipe(gulp.dest('dist/js'))
    });

6、终端执行,在终端中使用 cd进入到项目目录中,输入命令:gulp javascript;如果得到输出结果为:

    gulp script
    [13:34:57] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
    [13:34:57] Starting 'script'...
    [13:34:57] Finished 'script' after 6.13 ms

则任务执行成功;在目录的dist/js下,便可以看到已经压缩后的js文件;

5、压缩HTML,gulp-minify-html:

使用gulp-minify-html插件用来压缩html文件。任务如下:

    var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html" );

    gulp.task('minify-html', function () {
        gulp.src('src/*.html') // 要压缩的html文件
        .pipe(minifyHtml())    //压缩
        .pipe(gulp.dest('dist/html'));
    });

6、压缩CSS,gulp-minify-css:

使用gulp-minify-css插件用来压缩css文件,任务如下:

    var gulp = require('gulp'),
        minifyCss = require("gulp-minify-css" );
    
    gulp.task('minify-css', function () {
        gulp.src('src/*.css') // 要压缩的css文件
        .pipe(minifyCss())    //压缩css
        .pipe(gulp.dest('dist/css'));
    });

7、压缩图片,gulp-imagemin;

    var gulp = require('gulp');
    var imagemin = require('gulp-imagemin');
    var pngquant = require('imagemin-pngquant'); //png图片压缩插件
    gulp.task('default', function () {
        return gulp.src('src/images/*')
            .pipe(imagemin({
                progressive: true,
                use: [pngquant()] //使用pngquant来压缩png图片
            }))
            .pipe(gulp.dest('dist'));
    });

8、文件的重命名,gulp-rename;

gulp会以输入的文件流的名称来命名处理后的文件名,因此,如果需要重命名文件时,可以使用 gulp-rename插件;

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

    gulp.task('rename', function () {
        gulp.src('src/1.js')
        .pipe(uglify())           //压缩
        .pipe(rename('1.min.js')) //会将1.js重命名为1.min.js
        .pipe(gulp.dest('js'));
    });

9、JS代码检查,使用 gulp-jshint;

    var gulp = require('gulp'),
    jshint = require("gulp-jshint" );
    
    gulp.task('jsLint', function () {
        gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter()); // 输出检查结果
    });

10、文件的合并,gulp-concat;

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

11、自动刷新,实时反馈代码的改变,gulp-livereload;

    var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');
    gulp.task('less', function() {
      gulp.src('less/*.less')
        .pipe(less())
        .pipe(gulp.dest('css'))
        .pipe(livereload());
    });
    gulp.task('watch', function() {
      livereload.listen(); //要在这里调用listen()方法
      gulp.watch('less/*.less', ['less']);
    });

该笔记参考于 Nimo Chu的github与前端乱炖社区文章《学习前端自动化构建工具Gulp》以及gulp官方文档;

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

支持一下呗!Y(・∀・)Y
  • QQ
  • AliPay
  • WeChat

添加新评论

选择表情

  Timeline:成长

成长就是要多学、多问、多看、多记

updated on :

  关于博主

blog名-小优,平时喜欢跑步,喜欢听一些温柔,轻松的音乐,喜欢接触新事物,对自己的能力有一个很好的认知,人生在于折腾,一寸光阴一寸金,寸金难买寸光阴!我就是我,颜色不一样的烟火!

  近期评论

愚昧地去讨好别人,不如多给自己一点点关心! —— by 小优

每个人心里都有一段伤痕,时间才是最好的疗剂。

人总是珍惜未得到的,而遗忘了所拥有的。

退一步,并不象征我认输;放手,并不表示我放弃;微笑,并不意味我快乐!

人海中再回首,朋友真诚依旧,生命里重逢,心境平和温柔,往事如风,岁月如歌,漫漫人生路,苍桑几许,幸福几何!