网站首页 » 前端开发 » 前端工具 » 前端自动化工具 gulp 初识
上一篇:
下一篇:

前端自动化工具 gulp 初识

前言

我们先来看看官方是怎么说的:

易于使用:通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

构建快速:利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

插件高质:Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

易于学习:通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

gulp安装

初始化项目,初始化的的作用就是在当前目录下创建一个名为package.json文件,并且配置一些常用的信息,你不初始化也是可以的,但你得手动创建这个文件。

npm init

你会看到如下提示:

This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install –save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (workspace) version: (1.0.0) description: entry point: (gulpfile.js) test command: git repository: keywords: author: license: (ISC) About to write to E:\workspace\package.json: { “name”: “workspace”, “version”: “1.0.0”, “description”: “”, “main”: “gulpfile.js”, “dependencies”: { “gulp”: “^3.9.1” }, “devDependencies”: {}, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1″ }, “author”: “”, “license”: “ISC” } Is this ok? (yes) E:\workspace>

一开始我还以为哪里出错了,怎么没反应,一直停在这里:name: (workspace),原来是你设置下一些基本的信息,如果你需要设置,那么连续回车就可以了。

注意:这里有个地方你需要注意下的,就是如果你想把gulp安装到一个名为gulp的目录下时,你在初始化的时候你得手动写改一个gulp项目名,不要用默认的,因为默认的是以目录名(gulp)为项目名,你可以随便写一个(如:mygulp),如果你直接回车,不填一个那么他就会给你报错:

报错:

D:\workspace\gulp>npm install gulp –save-dev
npm ERR! Windows_NT 6.1.7601
npm ERR! argv “D:\\Program Files\\nodejs\\node.exe” “D:\\Program Files\\nodejs\\ node_modules\\npm\\bin\\npm-cli.js” “install” “gulp” “–save-dev” npm ERR! node v6.5.0
npm ERR! npm v3.10.3
npm ERR! code ENOSELF
npm ERR! Refusing to install gulp as a dependency of itself
npm ERR! npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! D:\workspace\gulp\npm-debug.log

现在你执行下面一行命令进行gulp安装

npm install gulp --save-dev

现在就完成了 gulp 的安装,接下来你就可以安装各种插件来自动化你的工作了。

gulp 插件

minify-css

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

这个插件可以对你指定的.css文件进行压缩,你的路可以是单个文件,也是可是一个目录,如果是目录的话就会把目录下的所有.css文件都进行压缩输出,并且通过rename插件对所有的.css文件进行重命名:旧名.min.css。官方文档https://www.npmjs.com/package/gulp-minify-css

// css压缩
var minifycss = require('gulp-minify-css');
gulp.task('istyle',function(){
	gulp.src('assets/css/style.css')
	    .pipe(rename({suffix: '.min'}))
	    .pipe(minifycss())
	    .pipe(gulp.dest('dist/css'))
	    .pipe(notify({ message: 'istyles task complete' }));
});

gulp-uglify

npm install gulp-uglify --save-dev
var uglify = require('gulp-uglify');
gulp.task('iuglify',function(){
	gulp.src('assets/js/*.js')
	    .pipe(rename({suffix: '.min'}))
            .pipe(uglify())
	    .pipe(gulp.dest('dist/js'))
	    .pipe(notify({ message: 'iuglify task complete' }));
});

这个插件就是压缩js并改名。官方文档https://www.npmjs.com/package/gulp-uglify

gulp-uglify压缩增强版

1.js压缩,自动添加头部声明信息

gulp.task('iuglify',function(){
    var pkg = require('./package.json');
    var banner = ['/**',
      ' * <%= pkg.name %>',
      ' * @version v<%= pkg.version %>',
      ' * <%= pkg.description %>',
      ' * <%= pkg.copyright %>',
      ' * @link <%= pkg.declear %>',
      ' * @license <%= pkg.license %>',
      ' */',
      ''].join('\n');
	gulp.src('assets/js/*.js')
	    .pipe(rename({suffix: '.min'}))
            .pipe(uglify())
            .pipe(header(banner, { pkg : pkg } ))
	    .pipe(gulp.dest('dist/js'))
	    .pipe(notify({ message: 'iuglify task complete' }));
});
提示

变量 banner 里面的一些变量是从 package.json文件里读取的,这就是为什么我们要创建 package.json 文件的原因之一了。当然,这些变量你也可以自己根据实际情况进行添加。

2. 压缩+合并JS+文件顶部输出声明信息

gulp.task('iconcatjs', function() {
    var pkg = require('./package.json');
    var banner = ['/**',
      ' * <%= pkg.name %>',
      ' * @version v<%= pkg.version %>',
      ' * <%= pkg.description %>',
      ' * <%= pkg.copyright %>',
      ' * @link <%= pkg.declear %>',
      ' * @license <%= pkg.license %>',
      ' */',
      ''].join('\n');
     gulp.src('assets/js/*.js')
         .pipe(concat('all.js'))
         .pipe(rename({suffix: '.min'}))
         .pipe(print())
         .pipe(header(banner, { pkg : pkg } ))
         .pipe(uglify())
         .pipe(gulp.dest('./dist/js'));
});

gulp-minify-html

npm install gulp-minify-html --save-dev
var minifyhtml = require('gulp-minify-html');
gulp.task('ihtml', function(){
  gulp.src(['assets/html/*.html'])
      .pipe(minifyhtml())
      .pipe(gulp.dest('dist/html'))
      .pipe(notify({ message: 'ihtml task complete' }))
});

gulp-replace

npm install gulp-replace --save-dev
var replace = require('gulp-replace');
gulp.task('ireplace', function(){
  gulp.src(['assets/html/*.html'])
      .pipe(replace('云库网', 'yunkus'))
      .pipe(gulp.dest('dist/html'))
      .pipe(notify({ message: 'ireplace task complete' }))
});

这个插件的功能就是文字替换,你可以用它来替换文件里的一些内容。官方文档https://www.npmjs.com/package/gulp-replace

gulp-rename

npm install gulp-rename --save-dev
var rename = require('gulp-rename');
gulp.task('irename',function(){
    gulp.src('assets/html/*.htm')
        .pipe(rename({prefix:'yk_'}))
        .pipe(gulp.dest('dist/html'))
});

官方文档https://www.npmjs.com/package/gulp-rename

gulp-uncss

npm install gulp-uncss --save-dev
var uncss = require('gulp-uncss');
gulp.task('iuncss',function(){
    gulp.src('assets/css/style.css')
        .pipe(uncss({
            html: ['assets/html/index.html','assets/html/index2.html']
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'))
})
送温暖

这个插件的原理就是 去掉一些 在 html 目录下 index.html 和 index2.html 都没使用到的css样式,然后现把这个处理过后的css文件输出来。html: ['assets/html/index.html','assets/html/index2.html']这里你还可以这样写html: ['assets/html/*.html'],也就是获取所有 html 目录下的所有文件。更多关于 uncss 插件用法你可以参考官方插件详细说明https://www.npmjs.com/package/gulp-uncss

gulp-cheerio

npm install gulp-cheerio --save-dev

你可以通过这个插件来实现向.html文件中插入指定的 css 样式和 js 文件引用,cheerio 的作用类似于 Jquery  ,也就是给你提供了对dom操作的方法。

官方文档 https://www.npmjs.com/package/gulp-cheerio

var imagemin = require('gulp-cheerio');
gulp.task('iss', function() {
     gulp.src('assets/html/*.html')
        .pipe(cheerio(function ($) {
            $('script').remove();
            $('link').remove();
            $('body').append('<script src="example.full.min.js"></script>');
            $('head').append('<link rel="stylesheet" href="example.full.min.css">');
        }))
        .pipe(gulp.dest('dist/html'));
});

gulp-imagemin

npm install gulp-imagemin --save-dev
var imagemin = require('gulp-imagemin');
gulp.task('iimages', function(){
    gulp.src('assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'))
});

官方文档https://www.npmjs.com/package/gulp-imagemin

gulp-foreach

这个插件可以让你对每个流中的文件进行相应的操作,下面我们就来看看一个例子,这个例子的功能就是获取文件名,把这人文件名作为变量来替换此文件中的目标字符串,值得你高兴的是这个不只是对单个文件的操作,而已还可以批量操作。

gulp.src('assets/html/*.html')
  .pipe(foreach(function(stream, file){
    return stream
      .pipe(replace('朝夕熊',path.basename(file.path,'.html')))
  }))
  .pipe(gulp.dest('dist/html'))
  .pipe(notify({ message: 'fileNameReplace task complete' }));
});

官方文档:https://www.npmjs.com/package/gulp-each

each

这个插件跟foreach插件功能都很相似,都是遍历文件,具体的区别你可以查看下官方的文档。还是实现上面 foreach 的例子,只不过这次我们就通过each来完成。请看代码

gulp.task('ifilenames', function () {
gulp.src('assets/html/*.html')
    .pipe(each(function(content, file ,callback){
    var newContent = content.replace(/朝夕熊/g, path.basename(file.path,'.html'));
    callback(null, newContent)
    }))
   .pipe(gulp.dest('dist/html'))
   .pipe(notify({ message: 'fileNameReplace task complete' }));
});
送温暖

代码中的/朝夕熊/g是正则表达式,是替换所有的意思。如果只是单纯的字符串’朝夕熊’,那么只会替换查看并替换第一个。如果页面中还有这个字符串,也不会进行替换的。

如果你有其它功能需求的,可以留言,大家一起探讨,学习,进步!关于nodejs的自动化工具gulp就介绍到这里,剩下的旅程,你得靠自己了,我也只能送你到这。

gulp-inline-source

这个插件可以把HTML中引入的CSS,js文件里的代码嵌入到HTML文件里,并且嵌入的代码是经过压缩的。当然,你也可以设置代码不压缩。

var inlinesource = require('gulp-inline-source');
gulp.task('inlinesource', function () {
    return gulp.src('assets/html/*.html')
        .pipe(inlinesource())
        .pipe(gulp.dest('./dist/html'));
});

官方文档:https://www.npmjs.com/package/gulp-inline-source

gulp-html-import

这个插件可以统一替换网站模板中统一调用的板块,你要做的只需要在模板中敲上标记代码,然后运行这个插件,你就可以把指定标记替换为你想替换的内容,这里跟织梦等内容管理系统的 header,footer 有点像。

var htmlImport = require('gulp-html-import');
gulp.task('import', function () {
    gulp.src('assets/html/*.html')
      .pipe(htmlImport('assets/html/cssjs/'))
      .pipe(gulp.dest('dist/html'));
})

应该也不用怎么解释了吧,相信你可以看懂!要想实现这个功能,还你得在HTML文件中添加标记,代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gulp-html-import Example - 云库网</title>
</head>
<body>
    @import "header.html"
    <p>云库网</p>
    @import "footer.html"
    <link rel="stylesheet" href="../css/style.css" inline>
</body>
</html>

这样就完成了统一共用模块的输出,功能简单,但实用,值得收藏!

相关资料

编写插件:http://www.gulpjs.com.cn/docs/writing-a-plugin/

推荐插件:http://gulpjs.com/plugins/

插件大全:https://www.npmjs.com/

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/gulp-getting-started/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END