Skip to content

Latest commit

 

History

History
262 lines (170 loc) · 8.78 KB

Gulp简要入门笔记.md

File metadata and controls

262 lines (170 loc) · 8.78 KB
Raw

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