开发者社区> 小结巴巴> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前段集成解决方案grunt+yeoman初步认识

简介: 1.什么是前段集成解决方案?   将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题、不足、缺陷和需求,所提出的一种解决问题的方案 2.yeoman   应用的架构,模型!  相当于一个生成器,,通过模具生成框架   安装Yeomen   npm install -g yo   安装anluarjs应用模型(安装模具)   npm isntall -g generator-angular    生成angular项目   yo angular appName   在自动生成过程中有多个选择,按自己的项目需求进行选择获取项目框架。
+关注继续查看

1.什么是前段集成解决方案?

  将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题、不足、缺陷和需求,所提出的一种解决问题的方案

2.yeoman

  应用的架构,模型!  相当于一个生成器,,通过模具生成框架

  安装Yeomen

  npm install -g yo

  安装anluarjs应用模型(安装模具)

  npm isntall -g generator-angular 

  生成angular项目

  yo angular appName

  在自动生成过程中有多个选择,按自己的项目需求进行选择获取项目框架。

3.bower

  版本管理控制工具

  安装bower

  npm isntall -g bower

4.grunt

 安装grunt

 npm  install -g grunt-cli

 yeomen是基于node生成的,所以首先访问的是package.json文件;

 这个文件是一个对象形式表现的(基本介绍):

 name---项目名(并不是文件名)

 version---版本号

 dependencies---项目在生成环境中依赖的包

 devDependcies---开发时候的依赖的包

 engines----当前需要的版本

 scripts----可以直接使用NPM的脚本命令 

 

 生成项目中的其他文件基本介绍:

 Gruntfile.js文件---grunt配置文件

 bower.json文件-----bower配置文件

 .travic.yml文件-----为开源打造的集成环境

 .jshintrc文件-----jshin的配置文件

 .gitignore--------指定当前要忽略的文件,不上传到git 

 .gitattrbutes-----git配置文件

 .editorconfig-----定义编辑时候的风格

 .bowerrc----------bower的配置项

 test-------提供自动化测试

 .babelrc -------- ec6 向 ec5进行转码

5.grunt配置文件

 grunt作为函数的参数传递;

 每一个Gruntfile文件 grunt- 都有一个这样最外层结构,require funcation

 task 任务

 代码压缩、目录清除、创建目录、都称之为任务

 initConfig(opt)中配置的单元task,每一task都可以单独存在和执行

sass:将sass文件转换成css文件并生成到对应的文件{
dist:{
  files:[{
    expand:true,
    cwd:'<%= config.app %>/style',
    src:['*.{scss,sass}'],
    dest:'.tmp/style',
    ext:'.css'
  }]
}

registTask(name,funcation(){
  grunt.task.run([
    task,
    task
  ])
})

 

6.从无到有构建Grunt项目

进入更目录 运行                                   npm init

安装grunt                                          npm install grunt --save-dev

安装load-grunt-tasks                          npm install load-grunt-tasks --save-dev

安装文件copy                                     npm install grunt-contrib-copy --save-dev

安装文件删除                                      npm install grunt-contrib-clean --save-dev

 

 创建Gruntfile文件

module.exports=funcation(grunt){

  require('load-grunt-tasks')(grunt);

  var config={

    app:'app',

    dist:'dist'

  }

  grunt.initConfig({

    config:config,

    //配置copy命令

    copy:{

      //方法一

      files:{

        //将src的文件复制到dist中

        dest:src,

      }

      //方法二

      files:{

        expand:true,                                               //将cwd目录下的所有 .html文件 复制到dest中 后缀名改为 .min.html

        cwd:'<%= config.app %>/',                         //源文件目录

        src:'.html',                            //源文件格式

        dest:'<%= config.dist %>/',                         //目的目录

        ext:'.min.html',                  //目的文件的后缀名

                      extDot:'first/last'                                          //选中第一个点开始  改后缀名,

        flatten:false/true                                          //true创建对应的文件目录

        rename:funcation(dest,src){          //自定义名称

          retrun dest+"js/"+src;

          }

        }

      },

    clean:{

      dist:{

        src:<%= config.dist %>/**/*,                       //清除所有目录,或者目录下的文件

        filter:'fnName'||funcation(filePath){ retrun true/false },

        dot:true/false                  //.的配置文件

      }

     }

    })

}

7.grunt和grunt任务

 npm uninstall -g grunt                             删除grunt

 npm install -g grunt-cli                            安装grunt

 配置任务

任务都是定义在initConfig中

配置任务和目标 (可以在任务配置多个目标,执行多个任务------concat任务中配置两个目录(执行两个任务),uglify中配置一个目标(执行一个任务))

grunt.initConfig({  

   concat: {

    foo: {   concat task "foo" target options and files go here.  },  

    bar: {   concat task "bar" target options and files go here.  },  

  },

   uglify: {

    bar: {   uglify task "bar" target options and files go here.  },  

  }

})

grunt.loadNpmTasks('grunt-contrib-uglify');        //加载任务的对应grunt插件(先npm install)
grunt.registerTask('default', ['uglify']);               //注册任务,这样才能用grunt命令执行该任务

concat,uglify都可以单独执行它下面的某一个任务

执行单个目标任务        指令:grunt contat:foo (执行目标任务--foo)

 

 

*基本的属性介绍

uglify 压缩js文件
concat 合并文件
cssmin 压缩css
jshint 检测JS文件
nodeunit node测试
htmlhint 检测html
watch 监控文件变化
qunit 单元测试
connect 连接服务器

dist 任务
files 配置多个源文件到目标文件的映射
cwd 源文件目录
src 源文件
dest 目标文件
options 默认设置
ext 后缀名
filter 过滤器(函数或者函数名)
nonull 非空
dot 。替换的位置
expand 执行一个动态的 源文件到目标文件的映射

 

匹配模式

**----任意字符,包括反斜杠
*-----任意字符,不包括反斜杠
?*----任意一个字符
{a,b}-a,b中的任意字符
!----取反

 

动态创建文件

expand:设为 true 来启用下面这些属性。
cwd:所有的 src 都相对于此路径(但是不包含)。
src:需要匹配的模式,相对于cwd。
dest:目标文件。
ext:在dest中的所有文件后缀都替换掉。
flatten:在dest中的所有路径的片段都替换掉。
rename:每当匹配到一个src时,都会调用此方法(在ext和flatten执行之后)。dest和src属性会被当参数传入,这个函数必须返回一个新的dest值。如果相同的dest被返回超过一次,每一个用它的src都会被添加到一个源数组。

 

注册多任务

grunt.initConfig({  

  log: {  

    foo: [1, 2, 3],  

    bar: 'hello world', 

    baz: false  

  }

})

grunt.registerMultiTask('log', 'Log stuff.', function() {
  grunt.log.writeln(this.target + ': ' + this.data);
});

运行             grunt log:foo             打印[1,2,3]      

运行             grunt log:bar             打印'hello world'

 

注册基本任务

grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) {
  if (arguments.length === 0) {
    grunt.log.writeln(this.name + ", no args");
  } else {
    grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
  }
});

运行           grunt foo:testing:123            打印"foo, testing 123"

自定义任务

grunt.registerTask('foo', 'My "foo" task.', function() {
  可以运行其他任务
  grunt.task.run('bar', 'baz');        //执行bar.baz
});

        

前段集成解决方案grunt+yeoman初步认识

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Gulp前端自动化构建工具的应用
实际前端开发不再仅仅是静态页面的开发了,丰富的前端技术让前端的代码逻辑越来越复杂, 模块化开发和各类框架也增加了在生产环境中部署开发环境代码的难度,这种情况下,前端自动化构建在前端开发中尤为重要。 我们会遇到下面的问题: a. 每次修改了HTML、JS、CSS等文件,都需要手动刷新浏览器,能不能修改了让浏览器自动刷新呢 ? b. 在发布项目的时候,需要将前端资源进行合并、压缩,尽量减少http请求,手动去完成合并压缩不仅繁琐,还容易出错,有什么技术可以自动地执行这些操作,解放我们的双手呢?
0 0
前端自动化构建之Gulp
本篇文章的核心是介绍一款强大的任务流工具Gulp,之所以题目叫做“前端自动化构建之Gulp”,是因为Gulp本身是使用JS编写的运行在Node环境的一个npm包,并且大部分开发者也都使用它来作为前端项目的自动化构建工具。不过,从本质上说,Gulp并非只能做前端自动化构建,后端构建发布自动化,脚本工具集自动化,测试流程自动化等都可以使用Gulp。所以,无论你是哪个技术栈的开发者,学习使用Gulp都会对你大有裨益。
0 0
从0到1搭建前端异常监控系统(Vue + Webpack + Node.js + Egg.js + Jest)(上)
从0到1搭建前端异常监控系统(Vue + Webpack + Node.js + Egg.js + Jest)
0 0
从0到1搭建前端异常监控系统(Vue + Webpack + Node.js + Egg.js + Jest)(下)
从0到1搭建前端异常监控系统(Vue + Webpack + Node.js + Egg.js + Jest)
0 0
正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp
正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp
0 0
Gulp(自动化构建工具 )
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率。 比如:   1、  压缩js   2、  压缩css   3、  压缩less   4、  压缩图片   等等… 我们完全可以利用Gulp来自动化地完成这些重复性很强的工作。
1129 0
使用篇-基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源
安装 Bower 由于 Bower 基于 Node.js,所以需要使用 npm 全局安装 Bower(这一步我们在之前设置本地开发环境里已经执行过): sudo npm install -g bower 接下来在博客项目根目录下创建.bowerrc文件,这是可选的,这样做的目的是为了告诉 Bower 所有下载的文件都会存放到vendor目录下,如果跳过这一步,Bower 将在项目根目录下创建一个bower_dl目录用于存放下载文件。
778 0
Gulp.js - 简单、直观的自动化项目构建工具
  Gulp.js 是一个简单、直观的构建系统。崇尚代码优于配置,使复杂的任务更好管理。通过结合 NodeJS 的数据流的能力,你能够快速构建。通过简单的 API 接口,只需几步就能搭建起自己的自动化项目构建工具。
603 0
+关注
小结巴巴
高级前端工程师,喜欢写一些总结和例子
文章
问答
文章排行榜
最热
最新
相关电子书
更多
前端自动化测试
立即下载
函数计算最佳实践:快速开发一个分布式 Puppeteer 网页截图服务
立即下载
React在大型后台管理项目中的工程实践
立即下载