前端构建工具Gulp使用总结

1.安装准备

1.1 Node.js安装

在安装Gulp之前首先的安装Node.js,

安装教程详见Node.js 安装配置

1.2 npm安装

在安装node的时候会自动安装npm模块管理器，详见npm模块管理器

win+r输入cmd打开命令终端

• node -v查看所安装的node的版本号
• npm -v查看所安装的npm的版本号

用win系统终端命令进入项目根目录

1. d: 进入d盘
2. dir d盘下文件列表
3. cd www 进入www文件夹,直至根目录
4. cd .. 退回上一级文件夹

2. 安装Gulp

2.1 全局安装

在全局安装gulpnpm install gulp -g

2.2 新建package.json文件

npm init 配置package.json文件

2.3 本地安装

进入项目根目录再安装一遍npm install gulp --save-dev

3. 安装插件

我们将要使用Gulp插件来完成以下任务：

• less的编译（gulp-less）
• 压缩js代码（gulp-uglify）
• 压缩css（gulp-minify-css）
• 压缩html（gulp-minify-html）
• 压缩图片（gulp-imagemin）
• 图片缓存（gulp-cache）
• 文件重命名（gulp-rename）
• 更改提醒（gulp-notify）
• 清除文件（del）

安装以上插件

4. 新建gulpfile.js文件

说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件

//导入工具包 require('node_modules里对应模块')
var gulp      = require('gulp');                    //本地安装gulp所用到的地方
var less      = require('gulp-less');               // 获取 gulp-less 模块（用于编译Less）
var jsmin     = require('gulp-uglify');             //JS文件压缩
var cssmin    = require('gulp-minify-css');         //css文件压缩
var htmlmin   = require('gulp-minify-html');        //html文件压缩
var cache     = require('gulp-cache');              //图片缓存
var imgmin    = require('gulp-imagemin');           //图片压缩
var notify    = require('gulp-notify');             //更动通知
var rename    = require('gulp-rename');             //重命名
var del       = require('del');
//var sass      = require('gulp-ruby-sass');          //编译SASS
// var jshint    = require('gulp-jshint');          //js代码检查
// var contact   = require('gulp-contact');        //合并js或css文件等

//gulp.task(name[, deps], fn)   定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options])    执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options])    处理完后文件生成路径
//gulp.watch(glob[, opts], tasks) 监视文件，并且可以在文件发生改动时候做一些事情。

//定义一个less任务（自定义任务名称）
// 编译Less ,在命令行项目目录下使用 gulp less 启动此任务
// gulp.task('less', function () {
//     gulp.src('docs/*/less/*.less')            //该任务针对的文件
//         .pipe(less())                         //该任务调用的模块
//         .pipe(gulp.dest('dist/css'))          //将会在dist/css下生成对应的css文件
//         .pipe(notify({ message: 'less task complete' }));
// });

//css文件压缩,在命令行项目目录下使用 gulp cssmin 启动此任务
gulp.task('cssmin', function () {
    gulp.src('docs/*/css/*.css')
        .pipe(cssmin({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: false//类型：Boolean 默认：false [是否保留换行]
        }))
        .pipe(rename({ suffix: '.min' }))  //对压缩后的文件重命名
        .pipe(gulp.dest('dist'))
        .pipe(notify({ message: 'cssmin task complete' }));
});

// js文件压缩 ,在命令行项目目录下使用 gulp jsmin 启动此任务
gulp.task('jsmin', function() {
    gulp.src('docs/**/js/*.js')              // 1. 找到文件
        .pipe(jsmin())                       // 2. 压缩文件
        .pipe(rename({extname:'.min.js'}))   // 3.对压缩文件重命名
        .pipe(gulp.dest('dist'))             // 4. 输出压缩后的文件
        .pipe(notify({ message: 'jsmin task complete' }));
});

//图片压缩,在命令行项目目录下使用 gulp imgmin 启动此任务
gulp.task('imgmin', function() {
    gulp.src('docs/*/img/**/*.{png,jpg,gif,ico}')
        .pipe(cache(imgmin({
            optimizationLevel: 5,//类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true,   //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true,    //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true      //类型：Boolean 默认：false 多次优化svg直到完全优化
        })))
        .pipe(gulp.dest('dist'))
        .pipe(notify({ message: 'imagemin task complete' }));
});

//html文件压缩,在命令行项目目录下使用 gulp htmlmin 启动此任务
gulp.task('htmlmin', function () {
    gulp.src('docs/*/*.html')       // 要压缩的html文件
        .pipe(htmlmin())            //压缩
        .pipe(gulp.dest('dist'))
        .pipe(notify({ message: 'htmlmin task complete' }));
});

//字体文件复制
gulp.task('fonts',function(){
    gulp.src('docs/*/fonts')
        .pipe(gulp.dest('dist'))
        .pipe(notify({message: 'fonts task complete'}));
})

// js代码检查
// gulp.task('jshint', function() {
//     gulp.src('docs/js/*.js')
//         .pipe(jshint())
//         // .pipe(jshint.reporter('default')); //默认在命令行里输出结果
//         .pipe(jshint.reporter('gulp-jshint-html-reporter', {filename:'jshint-report.html'}));    //输出结果到自定义的html文件

// });

//合并js或css文件等
// gulp.task('scripts', function() {
//     gulp.src('./js/*.js')
//         .pipe(concat('all.js'))
//         .pipe(gulp.dest('./dist'))
//         .pipe(rename('all.min.js'))
//         .pipe(uglify())
//         .pipe(gulp.dest('./dist'));
// });
//
// 编译SASS
// gulp.task('sass', function(){
//
//
//
// })
//
//
//在任务执行前，最好先清除之前生成的文件：
gulp.task('clean', function() {
     return del(['dist']);  //删除发布环境文件
});

// 默认任务,在命令行项目目录下使用 gulp 启动此任务
gulp.task('default',['clean'],function(){  //在默认任务执行前，先执行清除任务
    gulp.start('cssmin', 'jsmin', 'imgmin', 'htmlmin');
});

 //监听文件变化,在命令行项目目录下使用 gulp watch启动此任务,监听的文件有变化就自动执行
 gulp.task('watch',function(){
     //监听css
     gulp.watch('docs/*/css/*.css',['cssmin']);
     //监听js
     gulp.watch('docs/*/js/*.js',['jsmin']);
     //监听img
     gulp.watch('docs/*/img/*/*.{png,jpg,gif,ico}',['imgmin']);
     //监听HTML
     gulp.watch('docs/*/*.html',['htmlmin']);
 });

5. 运行Gulp

1. 通过终端命令行进入项目根目录
2. gulp default或default (说明：命令提示符执行gulp 任务名称)

如有不明之处，还请参阅gulp详细入门教程