gulp类似于grunt，都是基于Node.js的前端构建工具。不过gulp压缩效率更高。
一.安装gulp
首先，你要安装过nodejs，如果没有安装过的同学请自行下载。 先再命令行里输入 npm install gulp -g 下载gulp
二.创建gulp项目
创建一个你需要项目文件夹，然后在根目录输入 npm init （npm init命令会为你创建一个package.json文件，这个文件保存着这个项目相关信息。比如你用到的各种依赖）
三.使用npm install 安装各种依赖
例：
rush:js;">
npm install
browser-sync--save-dev
这里总共用到了这些依赖，请自行下载 具体各自都有什么用 后面会具体介绍。
四.编写gulpfile.js
首先，声明这些依赖
然后我们就要开始最重要的工作了，配置这些依赖
1.配置压缩css
imsun; white-space: normal; word-spacing: 0px; text-transform: none; float: none; font-weight: normal; color: rgb(0,0); font-style: normal; orphans: 2; widows: 2; display: inline !important; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px">
2.配置压缩js
3.配置压缩img
4.配置html，这里没有进行压缩，感觉没有压缩的必要 （纯属见仁见智）
5.配置清楚文件，因为每次打包都会生成新文件 所以在这之前要把之前的文件给清除掉
6.配置浏览器热加载
7.配置打包
这里的runSequence是指能同时执行多个命令
8.设置gulp启动时执行哪些配置
最后放上全部代码 供大家参考
rush:js;">
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.cle
arall(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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文地址：https://www.jb51.cc/js/37929.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
