帝王谷资源网 Design By www.wdxyy.com
gulp类似于grunt,都是基于Node.js的前端构建工具。不过gulp压缩效率更高。
一.安装gulp
首先,你要安装过nodejs,如果没有安装过的同学请自行下载。 先再命令行里输入 npm install gulp -g
下载gulp
二.创建gulp项目
创建一个你需要项目文件夹,然后在根目录输入 npm init
(npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息。比如你用到的各种依赖)
三.使用npm install 安装各种依赖
例:
npm install browser-sync--save-dev
这里总共用到了这些依赖,请自行下载 具体各自都有什么用 后面会具体介绍。
四.编写gulpfile.js
首先,声明这些依赖
然后我们就要开始最重要的工作了,配置这些依赖
1.配置压缩css
2.配置压缩js
3.配置压缩img
4.配置html,这里没有进行压缩,感觉没有压缩的必要 (纯属见仁见智)
5.配置清楚文件,因为每次打包都会生成新文件 所以在这之前要把之前的文件给清除掉
6.配置浏览器热加载
7.配置打包
这里的runSequence是指能同时执行多个命令
8.设置gulp启动时执行哪些配置
最后放上全部代码 供大家参考
var gulp = require('gulp'); var sass = require('gulp-sass'); var browserSync = require('browser-sync'); var uglify = require('gulp-uglify'); var imagemin = require('gulp-imagemin'); var minifyCSS = require('gulp-minify-css'); var cache = require('gulp-cache'); var del = require('del'); var runSequence = require('run-sequence'); var minifyHtml= require("gulp-minify-html"); gulp.task('sass', function(){ //打包sass return gulp.src('app/scss/**/*.scss') .pipe(sass()) // Converts Sass to CSS with gulp-sass .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ stream: true })) }); gulp.task('js',function() { gulp.src('app/**/*.js') .pipe(uglify())//压缩 .pipe(gulp.dest('dist')); }); gulp.task('css', function () { gulp.src('app/css/*.css') .pipe(minifyCSS()) .pipe(gulp.dest('dist/css')) }) gulp.task('minify-html',function() { gulp.src('app/**/*.html')//要压缩的html文件 .pipe(gulp.dest('dist')); }); gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)') // Caching images that ran through imagemin .pipe(cache(imagemin({ interlaced: true }))) .pipe(gulp.dest('dist/images')) }); gulp.task('clean', function(callback) { del('dist'); return cache.clearAll(callback); }); gulp.task('watch',['browserSync', 'sass'],function(){ //我们可以在watch任务之前告知Gulp,先把browserSync和Sass任务执行了再说。 gulp.watch('app/scss/**/*.scss', ['sass']); gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/js/**/*.js', browserSync.reload); // Other watchers }); gulp.task('browserSync', function() { //浏览器热加载 browserSync({ server: { baseDir: 'app' }, }) }); gulp.task('build', function (callback) { runSequence('clean',['minify-html','js','images','css'],callback) }); gulp.task('default', function (callback) { runSequence(['sass','browserSync', 'watch'], callback ) });
以上所述是小编给大家介绍的JS中使用gulp实现压缩文件及浏览器热加载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月28日
2024年10月28日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]