如何实现使用gulp实现文件压缩及浏览器的热加载
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何实现使用gulp实现文件压缩及浏览器的热加载,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2705字,纯文字阅读大概需要4分钟。
内容图文
![如何实现使用gulp实现文件压缩及浏览器的热加载](/upload/InfoBanner/zyjiaocheng/300/1ac95aedce144da6aaffff9095dada5f.jpg)
首先,你要安装过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 ) });
以上就是如何实现使用gulp实现文件压缩及浏览器的热加载的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的如何实现使用gulp实现文件压缩及浏览器的热加载全部内容,希望文章能够帮你解决如何实现使用gulp实现文件压缩及浏览器的热加载所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。