gulp工具

什么是gulp?

• 它是一款 nodejs 的应用
• 它用来构建前端自动化工作流
• 它可以实现实现代码的打包、压缩、合并、转译等
• 它拥有很丰富的插件系统

安装 gulp

npm install -g gulp

如果报错：Error: EACCES, open '/Users/xxx/xxx.lock
先执行：sudo chown -R $(whoami) $HOME/.npm 开启管理员权限

gulpfile.js 配置文件

var gulp = require("gulp") //加载gulp，相当于机床

var cssnano = require("gulp-cssnano") //css压缩
var concat = require("gulp-concat") //文件合并
var uglify = require("gulp-uglify") //js压缩
var rename = require("gulp-rename") //重命名
var clean = require("gulp-clean") //清空文件夹

var minhtml = require("gulp-minhtml") //html压缩
var jshint = require("gulp-jshint")  //js代码规范性检查
var imagemin = require("gulp-imagemin") //图片压缩

var browserSync = require("browser-sync").create() //浏览器同步刷新


gulp.task("css", function(){
    gulp.src(["./css/index.css",
              "./css/carousel.css",
              "./css/waterfull.css",
              "./css/loadmore.css",
              "./css/iconfont.css"]) //保证了css的顺序
        .pipe(concat("index-merge.css")) //css合并，文件名字为 index-merge.css
        .pipe(cssnano())     //css压缩
        .pipe(gulp.dest("dist/css/"))  //输出到 dist/css 文件夹下
})

gulp.task("cssall", function(){
    gulp.src("./css/*.css")  //不保证 css 的顺序，如果 css 写的不好，可能会有样式覆盖
        .pipe(concat("index-merge.css")) //css合并，文件名字为 index-merge.css
        .pipe(cssnano())     //css压缩
        .pipe(gulp.dest("dist/css/"))  //输出到 dist/css 文件夹下
})

gulp.task("imagemin", function(){
    gulp.src("./img/*.jpg")  //选择所有的图片
        .pipe(imagemin())    //压缩图片
        .pipe(gulp.dest("dist/img/"))  //输出到 dist/img 文件夹下
})

gulp.task("reload", function(){
    browserSync.reload()
})

gulp.task("server", function(){
    browserSync.init({   //开启服务器
        server: {
            baseDir:"./"    //设定服务器的根目录
        }
    })
    gulp.watch(["**/*.css", "**/*.js", "**/*.html"], ["reload"]) //监听，文件有变化就刷新
})

效果
demo