grunt简记
- module.exports = function(grunt) {
- grunt.registerTask('default',function(){
- console.log('Hello Grunt');
- })
- }
在执行他的时候,需要给参数赋值,比如在命令行输入:grunt greet:marymei
- module.exports = function(grunt) {
- grunt.registerTask('greet',function(name){
- console.log('Hello' +name);
- })
- }
处理错误,遇到错误warn默认就不继续执行了,但是可以在命令行设置grunt greet:n --force来强制执行
但是如果是fatal,那么即使使用了grunt greet:n --force他也是不向下执行的
- module.exports = function(grunt) {
- grunt.registerTask('greet',function(name){
- if(name.length < 2) {
- grunt.warn('名字太短了~');
- }
- grunt.log.writeln('Hello' +name);
- })
- }
链接多个任务:
- module.exports = function(grunt) {
- grunt.registerTask('greet-1',function(){
- grunt.log.writeln('Hello');
- });
- grunt.registerTask('greet-2',function(){
- grunt.log.writeln('Hola');
- });
- grunt.registerTask('greet-3',function(){
- grunt.log.writeln('您好');
- });
- grunt.registerTask('greentAll',['greet-1','greet-2','greet-3']);
- };
初始化:
- module.exports = function(grunt) {
- grunt.initConfig({
- greet: {
- english: 'Hello'
- }
- });
- grunt.registerTask('greet',funtion(){
- grunt.log.writeln(grunt.config.get('greet.english'));
- });
- };
多任务:
- module.exports = function(grunt) {
- grunt.initConfig({
- greet: {
- english: 'Hello',
- spanish:'Hola',
- chinese:'您好'
- }
- });
- grunt.registerMultiTask('greet',funtion(){
- grunt.log.writeln(this.target + ':' + this.data);
- });
- };
文件与目录
创建目录
- module.exports = function(grunt) {
- grunt.registerTask('createFolders',function(){
- grunt.file.mkdir('dist/stylesheets');
- });
- };
tree -I node_modules 命令可以查看文件目录
删除目录:
- module.exports = function(grunt) {
- grunt.registerTask('createFolders',function(){
- grunt.file.mkdir('dist/stylesheets');
- });
- grunt.registerTask('clean',function(){
- grunt.file.delete('dist');
- });
- };
显示版本
- module.exports = function(grunt) {
- grunt.initConfig({
- pkg:grunt.file.readJSON('package.json');
- });
- grunt.registerTask('copyright',function(){
- var content = grunt.tamplate.process('<%= pkg.name%>这个项目是由<%= pkg.author %>创建的,现在的版本<%= pkg.version %>');
- grunt.file.write('copyright.txt', content);
- });
- };
复制文件:
module.exports = function(grunt){ grunt.loadNpmTasks('grunt-contrib-copy'); }
配置要复制的文件:
- module.exports = function(grunt){
- //加载复制文件的插件
- grunt.loadNpmTasks('grunt-contrib-copy');
- grunt.initConfig({
- copy: {
- html: {
- src: 'index.html',
- dest: 'dist/'
- },
- style: {
- src: 'stylesheets/*.css',
- dest: 'dist/'
- },
- js: {
- src:'javascript/**/*.js'
- dest:'dist/'
- }
- }
- })
- };
监听文件变化的插件:
先安装如下命令
插件:npm install grunt-contrib-watch --save-dev
- module.exports = function(grunt){
- //加载复制文件的插件
- grunt.loadNpmTasks('grunt-contrib-copy');
- //加载监听文件变化,文件发生变化执行指定的任务
- grunt.loadNpmTasks('grunt-contrib-watch');
- grunt.initConfig({
- watch: {
- html:{
- files: ['index.html'],
- tasks:['copy.html']
- }
- },
- copy: {
- html: {
- src: 'index.html',
- dest: 'dist/'
- },
- style: {
- src: 'stylesheets/*.css',
- dest: 'dist/'
- },
- js: {
- src:'javascript/**/*.js',
- dest:'dist/'
- }
- }
- })
- };
插件
创建服务器:grunt-contrib-connect
配置服务器
实时刷新:livereload
编译sass:grunt-contrib-sass
编译less:grunt-contrib-less
合并文件:grunt-contrib-concat
选项:options
最小化js:grunt-contrib-uglify
最小化css:grunt-contrib-cssmin
最小化图像:grunt-contrib-imagemin
安装插件的命令 sudo npm install xxxx --save-dev
配置服务器:
- module.exports = function(grunt){
- //加载复制文件的插件
- grunt.loadNpmTasks('grunt-contrib-copy');
- //加载监听文件变化,文件发生变化执行指定的任务
- grunt.loadNpmTasks('grunt-contrib-watch');
- grunt.loadNpmTasks('grunt-contrib-connect');
- grunt.initConfig({
- connect:{
- server:{
- options: {
- port:8000,
- base:'dist'
- }
- }
- },
- watch: {
- html:{
- files: ['index.html'],
- tasks:['copy.html']
- }
- },
- copy: {
- html: {
- src: 'index.html',
- dest: 'dist/'
- },
- style: {
- src: 'stylesheets/*.css',
- dest: 'dist/'
- },
- js: {
- src:'javascript/**/*.js',
- dest:'dist/'
- }
- }
- })
- };
grunt简记的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- RangePartitioner 实现简记
摘要: 1.背景 2.rangeBounds 上边界数组源码走读 3.RangePartitioner的sketch 源码走读 4.determineBounds 源码走读 5.关于RangePart ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- nodejs、npm、grunt——名词解释
最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...
随机推荐
- Python数字、字符串
1. 数字 byte 在python3中最重要的特性是对文本和二进制数据做了更加清晰的区分,python3不会以任意隐式方式混用字节型和字符型,也因此在python3中不能拼接字符串和字节包(pyth ...
- 【CCPC-Wannafly Winter Camp Day4 (Div1) H】命命命运(概率DP)
点此看题面 大致题意: 有\(6\)个人玩大富翁,共有\(n\)块地,进行\(500\)轮,已知每个人掷骰子掷出\(1\sim6\)的概率.当某人到达一块未被占领的地时,他可以占领它.求最后每个人占有 ...
- 立体最短路径,广搜(POJ2251)
题目链接:http://poj.org/problem?id=2251 参考了一下大神们的解法.也有用深搜的.然而,之前不久看到一句话,最短路径——BFS. 参考:http://blog.csdn.n ...
- DP上课覆盖知识点,POJ(1513)
题目链接:http://poj.org/problem?id=1513 解题报告: 思路: 知识点从第二个开始扫,递推表达式是:minlec[i]=min(minlec[k])+1,并且要保证,tim ...
- android build.prop详解
# begin build properties开始设置系统性能 # autogenerated by buildinfo.sh{通过设置形成系统信息} ro.build.id=MIUI(版本ID) ...
- Ajax的学习笔记(一)
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),ajax并不是一门单独的语言,而是一种技术,是指一种创建交互式网页应用的网页开发技术. ...
- 散度(Divergence)和旋度(Curl)
原文链接 散度(Divergence) 散度的讨论应从向量和向量场说起.向量是数学中研究多维计算的基本概念.比如,速度可以分解为相互独立的分量,则速度就是一个多维的向量.假如空间中的每一个位置都有一个 ...
- 流形(Manifold)初步
原文链接 欧几里得几何学(Euclidean Geometry) 两千三百年前,古希腊数学家欧几里得著成了<几何原本>,构建了被后世称为“欧几里得几何学”的研究图形的方法.欧几里得创立了当 ...
- wgan pytorch,pyvision, py-faster-rcnn等的安装使用
因为最近在读gan的相关工作,wgan的工作不得不赞.于是直接去跑了一下wgan的代码. 原作者的wgan是在lsun上测试的,而且是基于pytorch和pyvision的,于是要装,但是由于我们一直 ...
- javascript入门笔记9-认识DOM
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...