gulp相关

Posted 2020-08-03 淡定的魂魄

‘use strict‘;

var gulp = require(‘gulp‘),

    webserver = require(‘gulp-webserver‘),     //gulp服务器
    connect = require(‘gulp-connect‘),         //创建本地服务器

    sass = require(‘gulp-sass‘),               //sass编译器
    less = require(‘gulp-less‘),               //less编译器

    uglify = require(‘gulp-uglify‘),           //最小化js文件
    cssmin = require(‘gulp-minify-css‘),       //最小化css文件
    imagemin = require(‘gulp-imagemin‘),       //最小化图片

    browserSync = require(‘browser-sync‘).create(), //实时自动刷新,支持多种设备
    livereload = require(‘gulp-livereload‘),   //网页自动刷新,浏览器中还需安装插件,使用不便

    autoprefixer = require(‘gulp-autoprefixer‘),//自动补全浏览器兼容的css
    concat = require(‘gulp-concat‘),           //文件合并,并且带版本后缀,以清除页面缓存
    clean = require(‘gulp-clean‘),             //文件清理,将不需要的文件清除掉

    zip = require(‘gulp-zip‘),                 //自动打包并按时间重命名
    sourcemaps = require(‘gulp-sourcemaps‘),   //资源map记录
    plumber = require(‘gulp-plumber‘),         //任务错误中断自动重传



var root = {
    web: ‘web/‘,
}
	
// 启动服务器
gulp.task(‘webserver‘, function() {
	// 打开网站页面
    gulp.src(root[‘web‘])
        .pipe(webserver({
            host: ‘0.0.0.0‘,
			port: 8000,
            directoryListing: {
                enable:true,
                path: root[‘web‘]
            }
        })
    );
});

// less解析
gulp.task(‘less‘, function(){
    //编译src目录下的所有less文件
    //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）
    // gulp.src([‘src/less/*.less‘, ‘!src/less/**/{reset,test}.less‘]) 
    gulp.src(‘web/less/*.less‘)
    // 开启sourcemap
    .pipe(sourcemaps.init())
    .pipe(less())
    //将编译后的css压缩,
    //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: ‘ie7‘}))
    .pipe(cssmin()) 
    // 生成写入sourcemap文件
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(‘web/css‘));
});

// 监听事件，可单独监听部分代码，也可以全部监听
gulp.task(‘watch‘, function(){
    // 当所有less文件发生改变时，调用less任务
    // gulp.watch(‘web/**/*.less‘,[‘less‘]);
    // 监听很多的文件
    gulp.watch([‘web/**/*.*‘], [‘html‘,‘less‘,‘js‘,‘jpg‘,‘png‘,‘gif‘]);
});

// gulp-connect插件：实时刷新
gulp.task(‘connect‘, function(){
    connect.server({
        root:‘web‘,
        livereload:true         //开启实时刷新
    });
});

gulp.task(‘default‘, [‘webserver‘,‘watchLess‘,‘connect‘]);

// gulp.task(‘default‘, function() {
//     // 将需要的放到基本加载项里面
//     gulp.start(‘webserver‘);
//     gulp.start(‘watchLess‘);
// });

 

tip:
单独执行某个gulp都是直接 gulp 启动项名称
例如监听事件，我的gulp任务名称为watchLess，所以命令为gulp watchLess

关于package.json文件里面的配置
没必要每次自己手动的添加，npm某个package的时候直接命令行，下载完毕会自动添加
比如下载gulp-less，命令：cnpm install gulp-less --save-dev

gulpfile常用的配置
gulp-webserver 服务器启动项
gulp-less less启动项
gulp-sass sass启动项，天生自带压缩特效
gulp-minify-css 将编译后的css压缩(直接在原有的less配置里面添加就好了.pipe(cssmin()))
gulp-sourcemaps 用于生成less与css编译时的引入关系，方便日后查找修改
gulp-uglify 用于压缩js
gulp-imagemin 用于压缩图片，包括jpg，png，gif