gulp前端自动化构建工具:常用插件介绍及使用

  Gulp是基于Node.js的一个构建工具(自动任务运行器),开发者可以使用它构建自动化工作流程(前端集成开发环境)。一些常见、重复的任务,例如:网页自动刷新、CSS预处理、代码检测、压缩图片、等等…… 只需用简单的命令就能全部完成。使用它,可以简化工作,让你把重点放在功能开发上;同时减少人为失误,提高开发效率和项目质量,让专注更为专注。如果你之前接触过Grunt,那上手Gulp就会觉得非常容易理解。

  github地址:https://github.com/San-Shui/gulp

  gulp插件:https://gulpjs.com/plugins/

  本项目使用gulp-webserver创建一个静态服务器,gulp-livereload实现网页自动刷新;同时介绍常用的插件以及插件的使用。

  • 本地安装

要安装最新版本或特定版本,请运行以下命令之一:

npm install –save-dev gulp

  • 全局安装

以下的 NPM 安装方式,将使 gulp 在全局环境下可用:

npm install –global gulp

clone远程仓库到本地:

git clone https://github.com/San-Shui/gulp.git

进入gulp目录

cd gulp

安装依赖

yarn install 或者 npm install

运行项目

gulp

gulp配置文件:

var gulp = require('gulp')
// 网页自动刷新(服务器控制客户端同步刷新)
var livereload = require('gulp-livereload')
// 本地服务器
var webserver = require('gulp-webserver')
// less文件编译成css
var less = require('gulp-less') 
// 压缩css文件
var cssmin = require('gulp-clean-css')
// 生成sourcemap文件
var sourcemaps = require('gulp-sourcemaps')
// 当发生异常时提示错误
var notify = require('gulp-notify')
var plumber = require('gulp-plumber')
// 压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作
var htmlmin = require('gulp-htmlmin')
// 只操作有过修改的文件
var changed = require('gulp-changed')
// 压缩图片文件(包括PNG、JPEG、GIF和SVG图片)
var imagemin = require('gulp-imagemin')
// 深度压缩图片
var pngquant = require('imagemin-pngquant')
// 只压缩修改的图片,没有修改的图片直接从缓存文件读取(C:\Users\Administrator\AppData\Local\Temp\gulp-cache)。
var cache = require('gulp-cache')
// 给css文件里引用url加版本号
var cssver = require('gulp-make-css-url-version')
// 压缩javascript文件,减小文件大小
var uglify = require('gulp-uglify')
// 文件重命名
var rename = require('gulp-rename')         
// 合并javascript文件,减少网络请求
var concat = require('gulp-concat')
// 文件清理
var clean = require('gulp-clean')               

/**
 * 使用gulp-less文件编译成css
 */
gulp.task('lessTask', function() {
    gulp.src('src/less/*.less')
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) // 错误提示
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(rename({ suffix: '.min' })) // 重命名
        .pipe(less()) // 将less文件编译成css
        .pipe(cssmin()) // 压缩css
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist/css')) // 将会在dist/css下生成index.css
})

/**
 * watch监测less文件的改变
 */
gulp.task('lessWatch', function () {
    gulp.watch('src/**/*.less', ['lessTask']); // 当src文件或者子文件下的某个less文件发生改变时,调用lessTask任务
});

/**
 * 使用gulp-htmlmin压缩html
 */
gulp.task('htmlminTask', function () {
    var options = {
        removeComments: true, // 清除HTML注释
        collapseWhitespace: true, // 压缩HTML
        collapseBooleanAttributes: true, // 省略布尔属性的值  ==> 
        removeEmptyAttributes: true, // 删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: true, // 删除
                    
                    

你可能感兴趣的:(gulp)