当前位置:首页 > 精彩博文 > Gulp简要入门笔记
Gulp简要入门笔记
时间:2020-02-28 作者: 分类:javascript

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官方文档;

微信公众号: i81for
扫一扫关注 · 佳节领红包
公益性全栈资源网站,鸣谢默默付出的博主、工程师、架构师们。
网站内容来源技术大牛的辛勤结晶。
81For 技术网站 Copyright ©2019 备案号:津ICP备19001147号-2