前端现阶段主流自动化构建工具有:grunt,gulp,webpack等,他们能对网站资源进行优化,大大提高我们的工作效率;gulp是基于NodeJS的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的 ...
前端现阶段主流自动化构建工具有: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 (全局安装) 六,实例展示(结合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 linkvar prefixer = require("gulp-autoprefixer"); //自动添加浏览器厂商前缀var htmlmin = require("gulp-htmlmin"); //对页面进行压缩
原标题:前端自动化构建工具
关键词:前端
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。