你的位置:首页 > 软件开发 > 网页设计 > 前端自动化构建工具

前端自动化构建工具

发布时间:2016-10-21 20:00:05
前端现阶段主流自动化构建工具有: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 (#换成@)。