用gulp构建一个简单常用的的环境

我有一只小松鼠 2019-06-27

gulp作为一个自动化构建工具,在前端开发中大大的提高了开发效率,前端开发者们可以利用他减少许多繁复无脑的操作。
这里简单构建一个小环境,就可以在以后的学习中,直接新建各种test.html测试我们新学习的知识点啦~
【看不明白的,有疏漏的,欢迎指出,我更改措辞或者bug】

入门安装

入门就不讲了,会用npm的同学应该都清楚,这里贴一个既有的官方指南。gulp入门指南

一些小基础

详细的配置我就不讲了,api文档戳进去看。简单做点通俗的讲解。

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

gulp是由每个小task组成的,我们可以类似函数一样,把我们需要的一个个小功能以各种task分开写,然后可以在cmd里使用gulp <task> <othertask> 方式来执行。

当然任务多了,我们就需要一键执行所有操作,所以一般情况下,我们只运行 gulp 命令,则会执行所注册的名为 default 的 task,然后在default这个任务后面,添加我们写好的其它task名的数组,则会挨个执行我们写好的各种task。不然只执行function。
如果没有default这个 task,那么gulp命令会报错。

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

注意: 默认的,task 将以最大的并发数执行,也就是说,gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列,并以特定的顺序执行,嗯,戳文档api文档

gulp.src(globs[, options])

其实说白了就是匹配我们要处理的文件,src就是路径。

gulp.src('client/templates/*.jade')

*自然是表示任意,全部。
glob 请参考 node-glob 语法 或者,你也可以直接写文件的路径。

gulp.pipe

其实就是把src匹配到的文件传递到后面来执行。括号里就是我们要进行的各种操作。

有点类似js语法,不难理解,用.接起来,一步步执行。
一般我们会一行行写,可读性好点,写一行不友好。

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

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.watch(glob[, opts], tasks)

监视文件,并且可以在文件发生改动时候做一些事情。

gulp.watch(glob [, opts], tasks) 
或
gulp.watch(glob [, opts, cb])

需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字,

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

也可以直接执行function,一样的。

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

gulp的很多操作都是用插件执行的,当然,详细操作自然是每个插件看作者文档了!而且同一个功能的插件也层出不穷,大家可以根据需要自行选择。好了,开始我们的构建,注意,提到的每一个插件都要npm安装

注意:每一个插件都存在可配置的空间,所以关于最大化利用好每个插件,也是参照文档来的,这里我们取一些通用配置,具体视项目情况而定。

开服务,自动刷新

无可厚非,代码实时保存,浏览器实时刷新,是前端最想要的功能,手动刷新浏览器相信是每一个前端新手要吐的操作。

开服务

采用gulp-connect插件。
根目录下开启服务,端口号为2323,开启实时刷新,局域网内可用。

var connect = require('gulp-connect');
var serverConfig = {
root: "./",
port: 2323,
livereload: true,
host: '::'
}
gulp.task('server',function(){
    connect.server(serverConfig);
});

配置自动刷新

采用gulp-livereload
开启刷新,监听html变化,并实时刷新。

var livereload = require('gulp-livereload')
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(['*.html'],function(event){
        livereload.changed(event.path);
    })
});

其实到这里,一个微型的服务就搭建起来了,最后别忘了最根本的一句

var gulp = require('gulp');

不然是起不来的。
为了简便,可以在gulpfiles.js里添加一行,

gulp.task('default',['server','watch']);

直接运行gulp就好,让他们依次执行。

到这里,其实就是一个小规模的调试环境,接下来,让我们升级一下,开始构造简单的发布环境

压缩html

采用的是gulp-htmlmin插件。
抽取src目录下的所有html文件,导入到htmlmin插件进行处理,并将结果输出到public目录,最后重新刷新已开启的服务。

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
    gulp.src('src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
              removeComments: true
        }))
        .pipe(gulp.dest('public'))
        .pipe(connect.reload());
});

压缩js

采用的是gulp-uglify插件,但同时,我们也用到了另一个插件gulp-concat,这个是用来连接各个文件组成一个文件。
抽取src/js下的所有js文件,将其合并,然后压缩,输出到public/js目录,最后服务重载。

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('script',function(){
    gulp.src('src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify({mangle:false}))
        .pipe(gulp.dest('public/js'))
    .pipe(connect.reload());
});

压缩css

采用的是gulp-cssnano插件。类似js,不解释了。

var cssnano = require('gulp-cssnano');
gulp.task('css',function(){
gulp.src('src/css/*.css')
    .pipe(concat('animate.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('public/css'))
    .pipe(connect.reload());
})

压缩图片

采取的是gulp-smushit插件,类似js,不解释。

var smushit = require('gulp-smushit');
gulp.task('imagemin',function(){
    gulp.src(['src/images/*.png','src/images/*.jpg'])
        .pipe(smushit({
            verbose:true
        }))
        .pipe(gulp.dest('public/images'))
        .pipe(connect.reload());
});

gulp-watch监听文件变动,自动重载

这个gulp-watch在前面有讲到,其实就是开启监听,并重新执行各个html
,js,css,imagemin压缩任务。
相信大家对比前面的gulp-livereload能够看的出来,这里两者是有冲突的,一个只是调试下刷新页面,一个却每次都要压缩。
所以其实实际项目中是不会把压缩任务配置到watch里,会造成资源浪费,你每保存一次,就会压缩。只会在最后调试完成,执行压缩一次。

gulp.task('watch', function () {
  gulp.watch(['src/*.html'], ['html']);
  gulp.watch(['src/js/*.js'], ['script']);
  gulp.watch(['src/css/*.css'], ['css']);
  gulp.watch(['src/images/*.*'], ['imagemin']);
});

做一个min的task就好,只需要gulp min

gulp.task('min',['html','script','css','imagemin']);

相关推荐