脚本宝典收集整理的这篇文章主要介绍了【gulp】快速应用指南,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
快速上手
一、准备目录结构
新建项目comPressjs,项目中有js、css、images文件夹,
然后运行
npm inIT -y
新建dist文件夹,存放压缩文件
新建gulpfile.js文件
结构图示:
二、使用步骤
1、全局安装:
npm i -g gulp
2、编辑 gulpfile.js文件
经典用法:
按需引用
VAR gulp = require('gulp'); //引用基础模块
var uglify = require('gulp-uglify'); //js压缩模块
var minifyCSS = require('gulp-minify-css'); //css压缩模块
var imagemin = require('gulp-imagemin'); //image压缩模块
压缩操作
//1、压缩js
gulp.task('script',function(){ //启动任务script
gulp.src('js/*.js') //找到文件
.piPE(uglify()) //压缩文件
.pipe(gulp.dest('dist/js')) //另存压缩文件
});
//2、压缩css
gulp.task('css',function(){ //启动任务css
gulp.src('css/*.css') //找到文件
.pipe(minifycss()) //压缩文件
.pipe(gulp.dest('dist/css')) //另存压缩文件
});
//3、压缩image
gulp.task('images',function(){ //启动任务image
gulp.src('images/*.*') //找到文件
.pipe(imagemin({ //压缩文件
PRogressive:true
}))
.pipe(gulp.dest('dist/images')) //另存压缩文件
});
监听任务
gulp.task('auto',function () {
gulp.watch('js/*.js',['script']); //监听script任务
gulp.watch('css/*.css',['css']); //监听css任务
gulp.watch('images/*.*',['images']); //监听images任务
});
默认任务
gulp.task('default',['script','css','images','auto']);
//默认任务,按数组依次执行
3、命令行运行 gulp;
4、补充:兼容ES6语法文件
1、安装npm i -D babel-preset-env 和 npm i -D gulp-babel
2、引用var babel = require('gulp-babel')
3、新建文件 touch .babelrc
4、编辑文件.babelrc {"presets":["env"]}
5、用法,压缩前使用管道.pipe(babel())处理
以上是脚本宝典为你收集整理的【gulp】快速应用指南全部内容,希望文章能够帮你解决【gulp】快速应用指南所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。