前端自动化构建工具 - gulp

前端现阶段主流自动化构建工具有:grunt,gulp,webpack等，他们能对网站资源进行优化，大大提高我们的工作效率；gulp是基于NodeJS的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。让我们一起来学习gulpj简单的吧吧！ ^_^

一，NodeJS的环境搭建：

说明：gulp是基于nodejs，理所当然需要安装nodejs；

安装：打开NodeJS官网 -> 点击Download按钮 ->根据自身电脑系统选择对应版本（.msi文件）->傻瓜试（next）就可以了（安装路径随意）。

二，命令行操作：

　　命令行在OSX是终端（Terminal），在windows是命令提示符（Command Prompt，即开始 ->搜索cmd）；

　　本例操作是在windows系统下进行的，进入cmd(即：点击开始 ->搜索cmd回车）；

　　node -v查看安装的nodejs版本，出现版本号，说明已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；

　　npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器；

　　cd定位到你的项目下的目录，用法：cd + 项目路径 ；

　　dir列出文件列表；

　　cls清空命令提示符窗口内容。

     

三，npm的介绍（本文结合css框架sass，和webstrom开发工具）

　　npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

　　npm使用前提：基于NodeJS环境和Git环境（本文不做详解）两者之上才可以使用。没有的话先安装；

　　以下操作在webstrom开发工具Terminal中进行(在cmd中操作相同)；

　　首先，进入项目路径下；

　　npm安装插件命令两种：

　　全局安装:  npm install <name> [-g];

　　局部安装: npm install <name> [--save-dev]；

　　<name>：要安装的node插件名称。例：npm install gulp -g (全局安装)


　　npm install gulp -g 全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量； 

　　npm install gulp --save-dev 局部安装：将会安装在当前定位目录；  全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

　　--save：将保存配置信息至package.json（package.json是NodeJS项目配置文件）；

　　-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。

　　为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可

　　npm init  一直回车，初始化产生node_modules文件，package.json

　　npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包。

　　　　package.json是一个普通json文件，所以不能添加任何注释，每安装一个插件文件中将多一个插件名及版本号。内容　　如下：

{
  "name": "gulp-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt-autoprefixer": "^3.0.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^5.0.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0"
  }
}

 

　　使用npm卸载插件：npm uninstall <name> [-g] [--save-dev]  PS：不要直接删除本地插件包

　　删除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

　　借助rimraf：npm install rimraf -g 用法：rimraf node_modules

　　使用npm更新插件：npm update <name> [-g] [--save-dev]

　　更新全部插件：npm update [--save-dev]

　　查看npm帮助：npm help

　　当前目录已安装插件：npm list

　　四，gulp安装

　　　　全局安装：npm install gulp -g

　　　　局部（本地）安装（当前项目路径下）：npm install gulp -save-dev

　　　　查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

　　　　全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

　　五，新建gulpfile.js文件

　　　　gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。

 

　　六，实例展示（结合sass框架，webstorm开发工具）

　　　　gulpfile.js文件中的gulp常见命令

var gulp = require("gulp"); //gulp核心模块
var sass = require("gulp-sass");  //sass编译
var server = require("gulp-connect"); //服务器
var concat = require("gulp-concat"); //合并
var uglify = require("gulp-uglify"); //压缩
var minifyCss = require("gulp-minify-css"); //css压缩
var imgmin = require("gulp-imagemin");  //图片压缩
var rename = require("gulp-rename");  //对文件进行重命名
var rev = require("gulp-rev"); //给静态资源添加上一个hash值后缀
var revCollector = require("gulp-rev-collector");  //根据rev生成manifest用来替换html link
var prefixer = require("gulp-autoprefixer"); //自动添加浏览器厂商前缀
var htmlmin = require("gulp-htmlmin"); //对页面进行压缩

gulp.task("default",["copyindex","copy-img","copy-data"]);

//根据rev-manifest对link路径进行替换
gulp.task("rev-collector",function(){
    return gulp.src(["dist/css/**/*.json","dist/index.html"])
        .pipe(revCollector({
            replaceReved: true,
        }))
        .pipe(gulp.dest("dist/"))

})
gulp.task("addPrx",function(){
    return gulp.src("src/css2/*.css")
        .pipe(prefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认：true 像这样：
            remove:true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(gulp.dest("dist/css/"))
})

//创建服务器
gulp.task("server",function(){
    server.server({
       root:"dist"
    })
})
//js 合并
gulp.task("js",function(){
    return gulp.src("src/js/**/*")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("dist/js/"))
});
//合并与压缩
gulp.task("js-c",function(){
    return gulp.src("src/script/**/*")
        .pipe(concat("all-c.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename("all-c-min.js"))
        .pipe(gulp.dest("dist/js/"))
});

//对css文件进行压缩
gulp.task("css",function(){
    return gulp.src("src/css/*.css")
        .pipe(minifyCss())
        .pipe(gulp.dest("dist/css/"))
        .pipe(rev())
        .pipe(gulp.dest("dist/css/"))
        .pipe(rev.manifest())
        .pipe(gulp.dest("dist/css/"))
})


//<!--copy src:操作的目录 dest:目标目录-->
gulp.task("copyindex",function(){
    return gulp.src("src/index.html")
        .pipe(htmlmin({
            minifyCSS:true,
            minifyJS:true,
            removeComments:true,
            collapseWhitespace:true
        }))
        .pipe(gulp.dest("dist/"))
})

//批量copy
gulp.task("copy-img",function(){
    return gulp.src("src/images/**/*")
        .pipe(imgmin())
        .pipe(gulp.dest("dist/images/"))
})

//多组文件的操作
gulp.task("copy-data",function(){
    return gulp.src(["src/json/*","src/xml/*","!src/json/s-*.json"])
        .pipe(gulp.dest("dist/data/"));
})

gulp.task("sass-c",function(){
    return gulp.src("src/scss/**/*.scss")
        .pipe(sass())

        .pipe(gulp.dest("dist/css/"))
})

//watch
gulp.task("watch",function(){
    gulp.watch("src/index.html",["copyindex"]);
    gulp.watch("src/images/**/*",["copy-img"]);
    gulp.watch(["src/json/*","src/xml/*"],["copy-data"]);

})

使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task 　　　　　found”，选择右键”Reload tasks”，双击运行即可。

　本文有任何错误，或有任何疑问，欢迎留言说明！