首页 > 代码库 > gulp运行及gulpfile.js配置

gulp运行及gulpfile.js配置

2024-11-01 01:41:02   204人阅读

控制台输入,运行gulp

gulp default

 

gulpfile.js

 

var gulp = require(‘gulp‘), //获取gulp
    htmlmin = require("gulp-htmlmin"), //压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作
    imagemin = require("gulp-imagemin"), //压缩图片文件
    cache = require(‘gulp-cache‘), //只压缩修改的图片
    pngquant = require(‘imagemin-pngquant‘), //深度压缩图片
    less = require("gulp-less"), //将less文件编译成css
    sourcemaps = require(‘gulp-sourcemaps‘), //生成sourcemap文件
    cssmin = require("gulp-clean-css"), //压缩css文件
    uglify = require("gulp-uglify"), //压缩javascript文件
    concat = require("gulp-concat"), //合并javascript文件，减少网络请求
    rev = require("gulp-rev-append"), //引用添加版本号，清除页面引用缓存
    autoprefixer = require("gulp-autoprefixer"), //自动处理浏览器前缀
    livereload = require("gulp-livereload"); //监听文件发生变化时，浏览器自动刷新页面


//定义testHtmlmin任务
gulp.task(‘testHtmlmin‘, function() {
    //testHtmlmin参数
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    gulp.src(‘*.html‘) //该任务针对的源文件
        .pipe(htmlmin(options)) //该任务调用的模块
        .pipe(gulp.dest(‘‘)); //该任务输出的位置
});

//定义testImagemin任务
gulp.task(‘testImagemin‘, function() {
    //testImagemin参数
    var options = {
        optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
        use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
    };
    gulp.src(‘*.{png,jpg,gif,ico}‘) //该任务针对的源文件
        .pipe(imagemin(options)) //该任务调用的模块
        .pipe(cache(imagemin(options))) //只压缩修改的图片
        .pipe(gulp.dest(‘‘)); //该任务输出的位置
});

//定义testLess任务
gulp.task(‘testLess‘, function() {
    //cssmin参数
    var options = {
        advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: ‘ie7‘, //保留ie7及以下兼容写法 类型：String 默认：‘‘or‘*‘ [启用兼容模式； ‘ie7‘：IE7兼容模式，‘ie8‘：IE8兼容模式，‘*‘：IE9+兼容模式]
        keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        keepSpecialComments: ‘*‘ //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    //编译src目录下的所有less文件
    //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）
    gulp.src([‘src/less/*.less‘, ‘!src/less/**/{reset,test}.less‘]) //该任务针对的源文件
        .pipe(sourcemaps.init()) //该任务调用的模块
        .pipe(less())
        .pipe(sourcemaps.write())
        .pipe(cssmin(options)) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: ‘ie7‘}))
        .pipe(livereload());
    .pipe(gulp.dest(‘‘)); //该任务输出的位置
});

//定义testJs任务
gulp.task(‘testJs‘, function() {
    //uglify参数
    var options = {
        mangle: true, //类型：Boolean 默认：true 是否修改变量名
        compress: true, //类型：Boolean 默认：true 是否完全压缩
        preserveComments: ‘all‘, //保留所有注释
        mangle: {
            except: [‘require‘, ‘exports‘, ‘module‘, ‘$‘]
        } //排除混淆关键字
    };
    //多个文件以数组形式传入
    //gulp.src([‘src/js/index.js‘,‘src/js/detail.js‘]) //该任务针对的源文件
    //压缩src/js目录下的所有js文件
    //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）
    gulp.src([‘src/js/*.js‘, ‘!src/js/**/{test1,test2}.js‘])
        .pipe(uglify(options)) //该任务调用的模块
        .pipe(concat(‘bundle.js‘)) //合并后的文件名
        .pipe(gulp.dest(‘‘)); //该任务输出的位置
});

//定义testRev任务
//html模板
// <!doctype html>
// <html>
//   <head>
//     <link rel="stylesheet" href="http://www.mamicode.com/css/style.css?rev=@@hash">
//     <script src="http://www.mamicode.com/js/js-one.js?rev=@@hash"></script>
//     <script src="http://www.mamicode.com/js/js-two.js"></script>
//   </head>
//   <body>
//     <div>hello, world!</div>
//     <img src="http://www.mamicode.com/img/test.jpg?rev=@@hash"  />
//     <script src="http://www.mamicode.com/js/js-three.js?rev=@@hash"></script>
//   </body>
// </html>
gulp.task(‘testRev‘, function() {
    gulp.src(‘name.html‘) //该任务针对的源文件
        .pipe(rev()) //该任务调用的模块
        .pipe(gulp.dest(‘‘)); //该任务输出的位置
});

//定义testAutoFx任务
gulp.task(‘testAutoFx‘, function() {
    //uglify参数
    var options = {
        browsers: [‘last 2 versions‘, ‘Android >= 4.0‘], //https://github.com/ai/browserslist#queries
        cascade: true, //是否美化属性值 默认：true 像这样：-webkit-transform: rotate(45deg);        transform: rotate(45deg);
        remove: true //是否去掉不必要的前缀 默认：true
    };
    gulp.src(‘name.css‘) //该任务针对的源文件
        .pipe(autoprefixer(options)) //该任务调用的模块
        .pipe(gulp.dest(‘‘)); //该任务输出的位置
});

//在命令行gulp auto启动此任务
gulp.task(‘auto‘, function() {
    livereload.listen();
    //监听文件修改，当文件修改则执行less任务
    gulp.watch(‘views/less/**.less‘, [‘less‘])
})

//使用gulp.task(‘default‘)定义默认任务
//在命令行使用gulp启动后面任务
gulp.task(‘default‘, [‘testHtmlmin‘, ‘testImagemin‘, ‘testLess‘, ‘testJs‘, ‘testRev‘, ‘testAutoFx‘])

 

gulp运行及gulpfile.js配置


联系
我们