gulp学习

nikita110861
180 阅读3分钟
  1. 全局/局部安装： npm i gulp -g 或者 npm i gulp --save-dev（开发时依赖并主动注入到package.json文件中）

2.gulp相关插件

gulp-concat: 合并文件（js/css）
gulp-uglify： 压缩js文件
gulp-rename： 文件重命名
gulp-less： 编译less
gulp-clean-css： 压缩css
gulp-livereload： 实时自动编译刷新
  1. 重要api
gulp.src(filePath/pathArr) :指向指定路径的所有文件，返回文件流对象，用于读取文件
gulp.dest(dirPath/pathArr): 指向指定的所有文件夹
  1. 根目录下新建gulpfile.js文件
// 构建js任务
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 注册合并压缩js的任务
gulp.task('js', function () {
    return gulp.src('src/js/*.js')  // 找到目标原文件，将数据读到gulp的内存中
        .pipe(concat('build.js'))  // 合并文件
        .pipe(gulp.dest('dist/js/'))  //临时输出文件到本地
        .pipe(uglify())  //压缩文件
        .pipe(rename({suffix: '.min'})) // 重命名
        .pipe(gulp.dest('dist/js/'))
});
  1. 执行：在命令行输入gulp js命令，就会执行合并压缩js的任务。

全自动构建项目

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require('gulp-less');
var cssClean = require('gulp-css-clean');
var htmlMin = require('gulp-htmlmin');
var livereload = require('gulp-livereload');
var connect = require('gulp-connect');
var open = require('open');

// 注册合并压缩js的任务
gulp.task('js', function () {
    return gulp.src('src/js/*.js')  // 找到目标原文件，将数据读到gulp的内存中
        .pipe(concat('build.js'))  // 合并文件
        .pipe(gulp.dest('dist/js/'))  //临时输出文件到本地
        .pipe(uglify())  //压缩文件
        .pipe(rename({suffix: '.min'})) // 重命名
        .pipe(gulp.dest('dist/js/'))
        .pipe(livereload())  // 实时刷新
        .pipe(connect.reload()); 
});
gulp.task('less', function () {
    return gulp.src('src/**/*.less')  // 有return，是异步构建，无return是同步构建
        .pipe(less()) // 编译less文件为css文件
        .pipe(gulp.dest('src/css'))
        .pipe(livereload())  // 实时刷新
        .pipe(connect.reload()); 
})
gulp.task('css', ['less'], function(){
    return gulp.src('src/css/*.css')
        .pipe(concat('build.css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssClean({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css/'))
        .pipe(livereload())  // 实时刷新
        .pipe(connect.reload()); 
})
// 注册压缩html的任务
gulp.task('html', function(){
    return gulp.src('index.html')
        .pipe(htmlMin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
        .pipe(livereload())  // 实时刷新
        .pipe(connect.reload()); 
})

// 注册监视任务(半自动)
gulp.task('watch',['default'], function () {
    // 开启监听
    livereload.listen();
    // 确认监听的目标以及绑定相应的任务
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch(['src/css/*.css', 'src/css/*.less'], ['css'])
});
// 注册监视任务（全自动）
gulp.task('watch', ['default'], function () {
    // 配置服务器的选项
    connect.server({
        root: 'dist/',
        livereload: true, // 实时刷新
        port: 5000
    })
    // open可以自动打开指定的连接
    open('http://localhost:5000/');
})

// 注册默认任务
gulp.task('default', ['js', 'css', 'less', 'html']);

优化

var gulp = require('gulp');
//  这个插件可以帮你自动下载gulp需要的插件，我们无需再引入
var $ = require('gulp-load-plugins')();
// var concat = require('gulp-concat');
// var uglify = require('gulp-uglify');
// var rename = require('gulp-rename');
// var less = require('gulp-less');
// var cssClean = require('gulp-css-clean');
// var htmlMin = require('gulp-htmlmin');
// var livereload = require('gulp-livereload');
// var connect = require('gulp-connect');
var open = require('open');

// 注册合并压缩js的任务
gulp.task('js', function () {
    return gulp.src('src/js/*.js')  // 找到目标原文件，将数据读到gulp的内存中
        .pipe($.concat('build.js'))  // 合并文件
        .pipe(gulp.dest('dist/js/'))  //临时输出文件到本地
        .pipe($.uglify())  //压缩文件
        .pipe($.rename({suffix: '.min'})) // 重命名
        .pipe(gulp.dest('dist/js/'))
        .pipe($.livereload())  // 实时刷新
        .pipe($.connect.reload()); 
});
gulp.task('less', function () {
    return gulp.src('src/**/*.less')  // 有return，是异步构建，无return是同步构建
        .pipe($.less()) // 编译less文件为css文件
        .pipe(gulp.dest('src/css'))
        .pipe($.livereload())  // 实时刷新
        .pipe($.connect.reload()); 
})
gulp.task('css', ['less'], function(){
    return gulp.src('src/css/*.css')
        .pipe($.concat('build.css'))
        .pipe($.rename({suffix: '.min'}))
        .pipe($.cssClean({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css/'))
        .pipe($.livereload())  // 实时刷新
        .pipe($.connect.reload()); 
})
// 注册压缩html的任务
gulp.task('html', function(){
    return gulp.src('index.html')
        .pipe($.htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
        .pipe($.livereload())  // 实时刷新
        .pipe($.connect.reload()); 
})

// 注册监视任务(半自动)
gulp.task('watch',['default'], function () {
    // 开启监听
    $.livereload.listen();
    // 确认监听的目标以及绑定相应的任务
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch(['src/css/*.css', 'src/css/*.less'], ['css'])
});
// 注册监视任务（全自动）
gulp.task('watch', ['default'], function () {
    // 配置服务器的选项
    $.connect.server({
        root: 'dist/',
        livereload: true, // 实时刷新
        port: 5000
    })
    // open可以自动打开指定的连接
    open('http://localhost:5000/');
})

// 注册默认任务
gulp.task('default', ['js', 'css', 'less', 'html']);
avatar
文章
阅读
粉丝