JS中使用gulp实现压缩文件及浏览器热加载功能

前端之家收集整理的这篇文章主要介绍了JS中使用gulp实现压缩文件及浏览器热加载功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

gulp类似于grunt,都是基于Node.js的前端构建工具。不过gulp压缩效率更高。

一.安装gulp

  首先,你要安装过nodejs,如果没有安装过的同学请自行下载。 先再命令行里输入 npm install gulp -g 下载gulp

二.创建gulp项目

  创建一个你需要项目文件夹,然后在根目录输入 npm init (npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息。比如你用到的各种依赖)

三.使用npm install 安装各种依赖

  例:

  这里总共用到了这些依赖,请自行下载 具体各自都有什么用 后面会具体介绍。

四.编写gulpfile.js

  首先,声明这些依赖

  然后我们就要开始最重要的工作了,配置这些依赖

  1.配置压缩css

  2.配置压缩js

  3.配置压缩img

  4.配置html,这里没有进行压缩,感觉没有压缩的必要 (纯属见仁见智)

  5.配置清楚文件,因为每次打包都会生成文件 所以在这之前要把之前的文件给清除掉

  6.配置浏览器热加载

  7.配置打包

  这里的runSequence是指能同时执行多个命令

  8.设置gulp启动时执行哪些配置

  最后放上全部代码 供大家参考

文件 .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实现压缩文件及浏览器热加载功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章