gulp的使用介绍及技巧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp的使用介绍及技巧相关的知识，希望对你有一定的参考价值。
1、安装全局gulp
npm install --global gulp
2、开发依赖安装
npm install --save-dev gulp
3、项目根目录创建名为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文件 cssFormat = require(‘gulp-css-format‘), //格式化css文件 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 () { //htmlmin参数 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 () { //imagemin参数 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="css/[email protected]@hash"> // <script src="js/[email protected]@hash"></script> // <script src="js/js-two.js"></script> // </head> // <body> // <div>hello, world!</div> // <img src="img/[email protected]@hash" /> // <script src="js/[email protected]@hash"></script> // </body> // </html> gulp.task(‘testRev‘, function () { gulp.src(‘name.html‘) //该任务针对的源文件 .pipe(rev()) //该任务调用的模块 .pipe(gulp.dest(‘‘)); //该任务输出的位置 }); //定义testAutoFx任务 gulp.task(‘testAutoFx‘, function () { //autoprefixer参数 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(‘‘)); //该任务输出的位置 }); //定义cssformat任务 gulp.task(‘cssformat‘, function () { //cssFormat参数 var options = { indent: 1, //设置选择器和声明之间的缩进，默认：0 hasSpace: true //属性和值之间插入一个空格,默认：false }; gulp.src(‘base.css‘) //该任务针对的源文件 .pipe(cssFormat(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‘, ‘cssformat‘])
4、运行gulp
gulp 任务名
以上是关于gulp的使用介绍及技巧的主要内容，如果未能解决你的问题，请参考以下文章