欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

gulp构建前端,压缩css,js文件,实现浏览器自动刷新

程序员文章站 2022-06-23 23:41:20
一、安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 由于npm安装module太慢,建议使用淘宝镜像:npm install cnpm -g --reg ......

一、安装node

nodejs下载地址:

nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功

由于npm安装module太慢,建议使用淘宝镜像:npm install cnpm -g --registry=https://registry.npm.taobao.org

安装完成,查看cnpm -v

二、安装gulp

1,gulp安装分为全局安装和局部安装

首先进行全局安装:npm install gulp -g

2,新建项目目录,并且进入到该项目,初始化该项目

cnpm init

gulp构建前端,压缩css,js文件,实现浏览器自动刷新

 

 执行命令后,可以一路回车,初始化后,会生成package.json文件

3,局部安装gulp,以及其他插件

执行此命令:cnpm install --save-dev gulp browser-sync gulp-clean-css gulp-uglify gulp-minify-css

需要的插件都以这种方式进行安装,安装完成之后,可以在package.json文件看到

gulp构建前端,压缩css,js文件,实现浏览器自动刷新

 

4,项目目录下新建gulpfile.js文件

全部的代码如下所示

var gulp = require("gulp")
var cssmin = require("gulp-clean-css")
var uglify = require("gulp-uglify")
var bs = require("browser-sync").create()
var cache = require("gulp-cache")
var imagemin = require("gulp-imagemin")
var rename = require("gulp-rename")

var path = {
    'html':'./templates/**/*.html',
    'css':'./src/css/**/*.css',
    'js':'./src/js/*.js',
    'images':'./src/images/*.*',
    'css_dist':'./dist/css/',
    'js_dist':'./dist/js/',
    'images_dist':'./dist/images/'
}

//解压html
gulp.task("html", function () {
    gulp.src(path.html)
        .pipe(bs.stream())
})


//解压css
gulp.task("css", function () {
    gulp.src(path.css)
        .pipe(cssmin())
        .pipe(rename({
            "suffix":".min"
        }))
        .pipe(gulp.dest(path.css_dist))
        .pipe(bs.stream())
})


//解压js
gulp.task("js", function () {
    gulp.src(path.js)
        .pipe(uglify())
        .pipe(rename({
            "suffix":".min"
        }))
        .pipe(gulp.dest(path.js_dist))

})


//解压images
gulp.task("images", function () {
    gulp.src(path.images)
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())
})

//定义监听任务
gulp.task("watch", function () {
    gulp.watch(path.css, ['css']),
    gulp.watch(path.js, ['js']),
    gulp.watch(path.html, ['html']),
    gulp.watch(path.images, ['images'])
})

//启动服务
gulp.task("bs", function () {
    bs.init({
        'server': {
            'basedir': './'
        }
    })
})

//定义默认任务
gulp.task("default", ['bs', 'watch'])

  

 项目根目录,执行命令:gulp,会自动打开浏览器,重新输入连接:

修改index.html里面的内容,此时有两种方式:

a. 修改文件后,ctrl+s保存文件

b. 修改文件后,直接点击浏览器

浏览器就会自动刷新

注意点:index.html引入的css文件,需要是解压之后的文件

gulp构建前端,压缩css,js文件,实现浏览器自动刷新